https://www.sanmartino.com/kumbe/js/kumbe_gsap.js

1// Make sure jQuery, GSAP, and ScrollTrigger scripts are loaded in the HTML before this file
2
3$(document).ready(function() {
4
5    // Register ScrollTrigger plugin
6    gsap.registerPlugin(ScrollTrigger);
7
8    
9
10    //moodboard: animates all
11    /*
12    document.querySelectorAll(".moodboard").forEach((board) => {
13        gsap.from(board.querySelectorAll("dt"), {
14            scrollTrigger: {
15            trigger: board,
16            start: "top 80%",
17            toggleActions: "play none none reverse",
18            markers: false,
19            },
20            opacity: 0,
21            scale: 0.95,
22            duration: 1,
23            stagger: 0.1,
24            ease: "power2.out"
25        });
26    });
27     */
28   
29    
30
31    //moodboard: animates while scrolling
32    
33    document.querySelectorAll(".moodboard").forEach((board) => {
34        // We use a ScrollTrigger to make the animation linked to the scroll
35        gsap.from(board.querySelectorAll("li"), {
36          scrollTrigger: {
37            trigger: board,
38            start: "top bottom",
39            end: "bottom+=200 bottom",
40            scrub: true,
41            onLeave: () => gsap.to(board.querySelectorAll("li"), { opacity: 1, scale: 1 }),
42          },
43          opacity: 0,
44          scale: 0.8,
45          stagger: 0.1,
46          ease: "power2.out"
47        });
48    });
49    
50    //full box animation
51    /*
52    gsap.from(".sc-content", {
53      scrollTrigger: {
54        trigger: ".full-box-content-wrapper",
55        start: "top 80%",       // when the top of wrapper hits 80% of viewport
56        end: "bottom 20%",      // optional, in case you want the animation to be scrubbed
57        toggleActions: "play none none reverse", // play on enter, reverse on leave
58      },
59      y: 100,                  // move up from 100px below
60      opacity: 0,              // start invisible
61      duration: 1.2,
62      ease: "power4.out",
63    });
64    */
65   
66    
67
68    // animated menu links 
69    function waitForElement(selector, callback) {
70        const el = document.querySelector(selector);
71        if (el) {
72            callback(el);
73        } else {
74            // Try again on the next animation frame
75            requestAnimationFrame(() => waitForElement(selector, callback));
76        }
77        }
78
79        //Fullscreen menu link animation
80        // When the fullscreen menu container is available, set up observer
81        waitForElement(".fullscreen-menu-container", function(menu) {
82        const observer = new MutationObserver((mutationsList) => {
83            mutationsList.forEach((mutation) => {
84            if (
85                mutation.type === "attributes" &&
86                mutation.attributeName === "class" &&
87                menu.classList.contains("open")
88            ) {
89                // Wait 300ms, then animate the links
90                setTimeout(() => {
91                gsap.from(".fullscreen-list > li", {
92                    opacity: 0,
93                    y: 20,
94                    stagger: 0.1,
95                    duration: 0.5,
96                    ease: "power2.out"
97                });
98                }, 0);
99            }
100            });
101        });
102
103        observer.observe(menu, { attributes: true });
104    });
105
106   
107
108
109
110
111
112    //More here
113
114});
115
116
117