https://swicos.com.my/wp-content/themes/rayo/js/animations.js?ver=20250922

1(function($){
2    'use strict';
3
4    const initGlobalAnimations = function($scope) {
5
6        // === Rotation Animation ===
7        const animateRotation = $scope[0].querySelectorAll(".animate-rotation");
8        animateRotation.forEach((section) => {
9            const value = section.dataset.value || 360;
10            gsap.fromTo(section,
11                { rotate: 0, transformOrigin: "50% 50%", ease: "sine" },
12                {
13                    rotate: value,
14                    scrollTrigger: {
15                        trigger: section,
16                        scrub: true,
17                        toggleActions: "play none none reverse",
18                    },
19                }
20            );
21        });
22
23        // === Scroll Animation: In Up ===
24        const animateInUp = $scope[0].querySelectorAll(".anim-uni-in-up");
25        animateInUp.forEach((element) => {
26            if (element.scrollTrigger) {
27                element.scrollTrigger.kill();
28            }
29            gsap.fromTo(element, {
30                opacity: 0,
31                y: 50,
32                ease: 'sine',
33            }, {
34                y: 0,
35                opacity: 1,
36                scrollTrigger: {
37                    trigger: element,
38                    toggleActions: 'play none none reverse',
39                    onEnter: () => element.setAttribute('data-animated', 'true'),
40                    onLeaveBack: () => element.removeAttribute('data-animated'),
41                    onKill: () => element.removeAttribute('data-animated'),
42                }
43            });
44        });
45
46        // === Scroll Animation: Scale In ===
47        const animateInUpFront = $scope[0].querySelectorAll(".anim-uni-scale-in");
48        animateInUpFront.forEach((element) => {
49            if (element.scrollTrigger) {
50                element.scrollTrigger.kill();
51            }
52            gsap.fromTo(element, {
53                opacity: 1,
54                y: 50,
55                scale: 1.2,
56                ease: 'sine',
57            }, {
58                y: 0,
59                x: 0,
60                opacity: 1,
61                scale: 1,
62                scrollTrigger: {
63                    trigger: element,
64                    toggleActions: 'play none none reverse',
65                    onEnter: () => element.setAttribute('data-animated', 'true'),
66                    onLeaveBack: () => element.removeAttribute('data-animated'),
67                    onKill: () => element.removeAttribute('data-animated'),
68                }
69            });
70        });
71
72        // === Scroll Animation: Scale In Right ===
73        const animateInUpRight = $scope[0].querySelectorAll(".anim-uni-scale-in-right");
74        animateInUpRight.forEach((element) => {
75            if (element.scrollTrigger) {
76                element.scrollTrigger.kill();
77            }
78            gsap.fromTo(element, {
79                opacity: 1,
80                y: 50,
81                x: -70,
82                scale: 1.2,
83                ease: 'sine',
84                duration: 5
85            }, {
86                y: 0,
87                x: 0,
88                opacity: 1,
89                scale: 1,
90                scrollTrigger: {
91                    trigger: element,
92                    toggleActions: 'play none none reverse',
93                    onEnter: () => element.setAttribute('data-animated', 'true'),
94                    onLeaveBack: () => element.removeAttribute('data-animated'),
95                    onKill: () => element.removeAttribute('data-animated'),
96                }
97            });
98        });
99
100        // === Scroll Animation: Scale In Left ===
101        const animateInUpLeft = $scope[0].querySelectorAll(".anim-uni-scale-in-left");
102        animateInUpLeft.forEach((element) => {
103            if (element.scrollTrigger) {
104                element.scrollTrigger.kill();
105            }
106            gsap.fromTo(element, {
107                opacity: 1,
108                y: 50,
109                x: 70,
110                scale: 1.2,
111                ease: 'sine',
112            }, {
113                y: 0,
114                x: 0,
115                opacity: 1,
116                scale: 1,
117                scrollTrigger: {
118                    trigger: element,
119                    toggleActions: 'play none none reverse',
120                    onEnter: () => element.setAttribute('data-animated', 'true'),
121                    onLeaveBack: () => element.removeAttribute('data-animated'),
122                    onKill: () => element.removeAttribute('data-animated'),
123                }
124            });
125        });
126
127        // === Grid Animations (2–5 cards) ===
128        const gridSets = [2, 3, 4, 5];

129        gridSets.forEach((num) => {
130            const selector = `.animate-card-${num}`;
131            if ($scope[0].querySelector(selector)) {
132                gsap.set(selector, {y: 50, opacity: 0});
133                ScrollTrigger.batch(selector, {
134                    interval: 0.1,
135                    batchMax: num,
136                    duration: 3,
137                    delay: num >= 4 ? 1 : 0,
138                    onEnter: batch => gsap.to(batch, {
139                        opacity: 1, 
140                        y: 0,
141                        ease: 'sine',
142                        stagger: {each: 0.15, grid: [1, num]},
143                        overwrite: true
144                    }),
145                    onLeave: batch => gsap.set(batch, {opacity: 1, y: 0, overwrite: true}),
146                    onEnterBack: batch => gsap.to(batch, {opacity: 1, y: 0, stagger: 0.15, overwrite: true}),
147                    onLeaveBack: batch => gsap.set(batch, {opacity: 0, y: 50, overwrite: true})
148                });
149                ScrollTrigger.addEventListener("refreshInit", () => gsap.set(selector, {y: 0, opacity: 1}));
150            }
151        });
152
153        // === Top to Bottom Animation ===
154        const toBottomEl = $scope[0].querySelectorAll(".anim-top-to-bottom");
155        toBottomEl.forEach((element) => {
156            let toBottomTl = gsap.timeline({
157                scrollTrigger: {
158                    trigger: ".fullwidth-text__tl-trigger",
159                    start: "top 99%",
160                    end: "top 24%",
161                    scrub: {
162                        scrub: true, 
163                        ease: "none" 
164                    },
165                },
166            });
167            toBottomTl.fromTo(element, {
168                transform: "translate3d(0, -100%, 0)"
169            }, 
170            {
171                transform: "translate3d(0, 0, 0)"
172            });
173        });
174
175        // === Zoom In / Out Animations ===
176        const docStyle = getComputedStyle(document.documentElement);
177        const zoomInContainer = $scope[0].querySelectorAll(".anim-zoom-in-container");
178        const zoomOutContainer = $scope[0].querySelectorAll(".anim-zoom-out-container");
179
180        // Zoom In 
181        zoomInContainer.forEach((element) => {
182            const zoomInBlockTl = gsap.timeline({
183                scrollTrigger: {
184                    trigger: element,
185                    start: "top 82%",
186                    end: "top 14%",
187                    scrub: {
188                        scrub: true,
189                        ease: "power4.inOut"
190                    },
191                },
192            });
193            zoomInBlockTl.fromTo(element, {
194                borderRadius: '200px',
195                transform: "scale3d(0.94, 1, 1)"
196            }, {
197                borderRadius: docStyle.getPropertyValue("--_radius-l"),
198                transform: "scale3d(1, 1, 1)"
199            });
200        });
201
202        // Zoom Out
203        zoomOutContainer.forEach((element) => {
204            const zoomOutBlockTl = gsap.timeline({
205                scrollTrigger: {
206                    trigger: element,
207                    start: "top 82%",
208                    end: "top 14%",
209                    scrub: {
210                        scrub: true,
211                        ease: "power4.inOut"
212                    },
213                },
214            });
215            zoomOutBlockTl.fromTo(element, {
216                borderRadius: '200px',
217                scaleX: 1.14,
218                scaleY: 1,
219                scaleZ: 1
220            }, {
221                borderRadius: docStyle.getPropertyValue("--_radius-l"),
222                scaleX: 1,
223                scaleY: 1,
224                scaleZ: 1
225            });
226        });
227    };
228
229    // Elementor hook
230    $(window).on('elementor/frontend/init', function () {
231        elementorFrontend.hooks.addAction('frontend/element_ready/global', initGlobalAnimations);
232    });
233
234})(jQuery);