https://turtltech.netlify.app/assets/js/gsap-animation.js

1gsap.registerPlugin(ScrollTrigger, SplitText);
2gsap.config({
3    nullTargetWarn: false,
4    trialWarn: false
5});
6
7function tg_title_animation() {
8
9    var tg_var = jQuery('.tg-heading-subheading');
10    if (!tg_var.length) {
11        return;
12    }
13    const quotes = document.querySelectorAll(".tg-heading-subheading .tg-element-title");
14
15    quotes.forEach(quote => {
16
17        //Reset if needed
18        if (quote.animation) {
19            quote.animation.progress(1).kill();
20            quote.split.revert();
21        }
22
23        var getclass = quote.closest('.tg-heading-subheading').className;
24        var animation = getclass.split('animation-');
25        if (animation[1] == "style4") return
26
27        quote.split = new SplitText(quote, {
28            type: "lines,words,chars",
29            linesClass: "split-line"
30        });
31        gsap.set(quote, { perspective: 400 });
32
33        if (animation[1] == "style1") {
34            gsap.set(quote.split.chars, {
35                opacity: 0,
36                y: "90%",
37                rotateX: "-40deg"
38            });
39        }
40        if (animation[1] == "style2") {
41            gsap.set(quote.split.chars, {
42                opacity: 0,
43                x: "50"
44            });
45        }
46        if (animation[1] == "style3") {
47            gsap.set(quote.split.chars, {
48                opacity: 0,
49            });
50        }
51        quote.animation = gsap.to(quote.split.chars, {
52            scrollTrigger: {
53                trigger: quote,
54                start: "top 90%",
55            },
56            x: "0",
57            y: "0",
58            rotateX: "0",
59            opacity: 1,
60            duration: 1,
61            ease: Back.easeOut,
62            stagger: .02
63        });
64    });
65}
66ScrollTrigger.addEventListener("refresh", tg_title_animation);