https://toraiz.jp/business/assets/js/modules/pp.scrollTrigger.js

1import { gsap } from "../vendor/gsap/src/index.js";
2import { SplitText } from "../vendor/gsap/src/SplitText.js";
3gsap.registerPlugin(SplitText);
4import { ScrollToPlugin } from "../vendor/gsap/src/ScrollToPlugin.js";
5gsap.registerPlugin(ScrollToPlugin);
6import { ScrollTrigger } from "../vendor/gsap/src/ScrollTrigger.js";
7gsap.registerPlugin(ScrollTrigger);
8
9export class ppScrollTrigger {
10  constructor() {
11    let sc_blocks = document.querySelectorAll(".--sc");
12    
13    if (sc_blocks.length != 0) {
14      sc_blocks.forEach((ele) => {
15        ele.tl = gsap.fromTo(
16          ele,
17          {
18            duration: 10,
19            y: 50,
20            autoAlpha: 0,
21          },
22          {
23            y: 0,
24            autoAlpha: 1,
25            scrollTrigger: {
26              trigger: ele,
27              start: "top bottom-=30%",
28              end: "bottom top+=30%",
29              toggleActions: "play none none reverse",
30              //markers: true,
31              //scrub: 1,
32            },
33          }
34        );
35      });
36    }
37 
38    
39
40    this.imgAction = function () {
41      let images = document.querySelectorAll(".--scImg img");
42
43      if (images.length == 0) return false;
44      images.forEach((ele) => {
45        ele.tl = gsap.fromTo(
46          ele,
47          {
48            y: -30,
49            scale: 1.2,
50            autoAlpha: 0,
51          },
52          {
53            y: 0,
54            scale: 1,
55            autoAlpha: 1,
56            scrollTrigger: {
57              trigger: ele,
58              start: "top bottom-=50%",
59              end: "bottom top+=40%",
60              toggleActions: "play none none reverse",
61              //markers: true,
62              //scrub: 1,
63            },
64          }
65        );
66      });
67    };
68  }
69}