https://khshield.com/template/js/module/ScrollTriggerModule.js

1export default function ScrollTriggerModule() {
2    gsap.registerPlugin(ScrollTrigger);
3
4    let starts = "top 100%"
5    let ends = "top 80%"
6    if (window.innerWidth < 1200) {
7        starts = "top 170%"
8        ends = "top 80%"
9    }
10    const prlYs = document.querySelectorAll('.prlY')
11    prlYs.forEach(item => {
12        let durationTrans = 4;
13        if (item.getAttribute("data-spl-duration")) {
14            durationTrans = item.getAttribute("data-spl-duration");
15        }
16        gsap.to(item, {
17            y: 0,
18            duration: durationTrans,
19            scrollTrigger: {
20                trigger: item,
21                start: starts,
22                end: ends,
23                scrub: durationTrans,
24                toggleActions: "play none none none",
25                toggleClass: "ani"
26                    // markers: true,
27            }
28        })
29    })
30    const prlXs = document.querySelectorAll('.prlX')
31    prlXs.forEach(item => {
32        gsap.to(item, {
33            x: 0,
34            duration: 4,
35            scrollTrigger: {
36                trigger: item,
37                start: starts,
38                end: ends,
39                scrub: 4,
40                toggleActions: "play none none none",
41                toggleClass: "ani"
42                    // markers: true,
43            }
44        })
45    })
46}
47
48// toggleActions: onEnter onLeave onEnterBack onLeaveBack
49// toggleActions property: play pause resume reverse restart reset complete none