https://credosemi.com/wp-content/themes/credosemi/blocks/hero-fifty-fifty-banner/script.js?ver=6ac160d3e800c

1typeof app !== "undefined" &&
2  app.ready(() => {
3    var $ = jQuery.noConflict();
4
5    const script = () => {
6      const els = $("section.hero-fifty-fifty-banner");
7      if (!els.length) return;
8
9      els.each(function () {
10        const self = $(this);
11
12        if (!self.hasClass("no-animation")) {
13          app.Animation.prototype.headingAnimation(
14            self.find(".main-title"),
15            {
16              trigger: self,
17              start: "top 60%",
18            },
19            {
20              onStart: () => {
21                const timeline = gsap.timeline();
22
23                // Entrance animation for image
24                timeline.fromTo(
25                  self.find(".item-image"),
26                  {
27                    opacity: 0,
28                    y: 50,
29                  },
30                  {
31                    opacity: 1,
32                    y: 0,
33                    duration: 0.8,
34                    ease: Power2.easeOut,
35                    stagger: 0.2,
36                  },
37                  "-=0.2"
38                );
39
40                timeline.fromTo(
41                  self.find(".para-desc"),
42                  {
43                    autoAlpha: 0,
44                    y: 30,
45                  },
46                  {
47                    autoAlpha: 1,
48                    y: 0,
49                    duration: 0.6,
50                    ease: Power2.easeOut,
51                  }
52                );
53
54                timeline.fromTo(
55                  self.find(".cta-link, .brochure-btn"),
56                  {
57                    opacity: 0,
58                    y: 30,
59                  },
60                  {
61                    opacity: 1,
62                    y: 0,
63                    duration: 0.6,
64                    ease: Power2.easeOut,
65                  },
66                  "-=0.3"
67                );
68
69                const navWrapper = self.find(".nav-wrapper");
70                if (navWrapper.length) {
71                  navWrapper.addClass("nav-scroll");
72
73                  gsap.fromTo(
74                    navWrapper,
75                    { opacity: 0, y: -80 },
76                    { opacity: 1, y: 0, duration: 0.6, ease: Power2.easeOut }
77                  );
78                }
79              },
80            }
81          );
82        } else {
83          gsap.set(self.find(".para-desc"), { autoAlpha: 1, y: 0 });
84          gsap.set(self.find(".main-title"), { opacity: 1, y: 0 });
85          gsap.set(self.find(".item-image"), { opacity: 1, y: 0 });
86          gsap.set(self.find(".cta-link"), { opacity: 1, y: 0 });
87          gsap.set(self.find(".brochure-btn"), { opacity: 1, y: 0 });
88        }
89
90        handleStickyNav(self);
91        handleNavigation(self);
92      });
93    };
94
95    const handleStickyNav = (self) => {
96      const navWrapper = self.find(".nav-wrapper");
97
98      if (navWrapper.length === 0) {
99        return;
100      }
101
102      const navOffset = navWrapper.offset().top;
103      let placeholder;
104
105      $(window).on("scroll", function () {
106        const scrollTop = $(window).scrollTop();
107
108        if (scrollTop >= navOffset) {
109          if (!placeholder) {
110            placeholder = $("<div>")
111              .height(navWrapper.outerHeight())
112              .insertAfter(navWrapper);
113            navWrapper.addClass("sticky-active");
114          }
115        } else {
116          if (placeholder) {
117            navWrapper.css("animation", "fadeOut 0.4s ease forwards");
118            setTimeout(() => {
119              placeholder.remove();
120              placeholder = null;
121              navWrapper.removeClass("sticky-active").css("animation", "");
122            }, 400);
123          }
124        }
125      });
126    };
127
128    const handleNavigation = (self) => {
129      const navButtons = self.find(".sub-navigation");
130      const topOffset = 80;
131
132      navButtons.first().addClass("active");
133
134      navButtons.on("click", function () {
135        const button = $(this);
136        const target = button.attr("data-target");
137
138        if (target && target.startsWith("#")) {
139          var targetElement =  $(target);
140
141          if (!targetElement.length) {
142            const targetClass = target.substring(1);
143            targetElement = $(`.${targetClass}`);
144          }
145
146          if (targetElement.length) {
147            navButtons.removeClass("active");
148            button.addClass("active");
149
150            $("html, body").animate(
151              {
152                scrollTop: targetElement.offset().top - topOffset,
153              },
154              1000
155            );
156          }
157        }
158      });
159
160      $(window).on("scroll", function () {
161        let scrollPos = $(window).scrollTop();
162        const viewportMid = scrollPos + $(window).height() / 2;
163
164        navButtons.each(function () {
165          const button = $(this);
166          const target = button.attr("data-target");
167
168          if (target && target.startsWith("#")) {
169            const targetClass = target.substring(1);
170            const targetElement = $(`.${targetClass}`);
171
172            if (targetElement.length) {
173              const offsetTop = targetElement.offset().top;
174              const offsetBottom = offsetTop + targetElement.outerHeight();
175
176              if (viewportMid >= offsetTop && viewportMid < offsetBottom) {
177                navButtons.removeClass("active");
178                button.addClass("active");
179              }
180            }
181          }
182        });
183      });
184    };
185
186    script();
187  });