https://www.fctatran.sk/design/js/gsap-custom.js

1gsap.registerPlugin(ScrollTrigger);
2
3//01. Animated-Heading ////////////////////////////////////////////////////////////////////////
4
5document.addEventListener("DOMContentLoaded", () => {
6  gsap.registerPlugin(ScrollTrigger);
7
8  const animatedHeadings = document.querySelectorAll(".animated-heading");
9
10  animatedHeadings.forEach((heading) => {
11    if (heading.splitText) {
12      heading.splitText.revert();
13    }
14
15    const splitText = new SplitType(heading, { types: "words" });
16    heading.splitText = splitText;
17
18    gsap.fromTo(
19      splitText.words,
20      { opacity: 0, y: 30, rotationX: -90 },
21      {
22        opacity: 1,
23        y: 0,
24        rotationX: 0,
25        duration: 1,
26        stagger: 0.05,
27        ease: "back.out(2)",
28        scrollTrigger: {
29          trigger: heading,
30          start: "top 85%",
31          toggleActions: "play none none none",
32          once: true,
33        },
34      }
35    );
36  });
37
38  setTimeout(() => {
39    ScrollTrigger.refresh();
40  }, 500);
41});
42
43//02. Animate-Scale-Opacity ////////////////////////////////////////////////////////////////////////
44
45document.addEventListener("DOMContentLoaded", function () {
46  document
47    .querySelectorAll(".animate-scale-opacity")
48    .forEach(function (element) {
49      gsap.fromTo(
50        element.querySelector(".animate-scale"),
51        {
52          scale: 0.85,
53          opacity: 0,
54        },
55        {
56          scale: 1,
57          opacity: 1,
58          duration: 1.3,
59          ease: "power4.inOut",
60          scrollTrigger: {
61            trigger: element,
62            start: "top 80%",
63            toggleActions: "play none none reverse",
64          },
65        }
66      );
67    });
68});
69
70//03. Animated-Reveal-From-Top ////////////////////////////////////////////////////////////////////////
71
72document.addEventListener("DOMContentLoaded", function () {
73  gsap.utils
74    .toArray('[data-gsap="reveal-from-top"]')
75    .forEach(function (imageWrapper) {
76      const filter = imageWrapper.querySelector(".reveal-filter");
77
78      gsap.fromTo(
79        filter,
80        {
81          y: "0%",
82        },
83        {
84          y: "100%",
85          duration: 1.5,
86          ease: "power4.inOut",
87          scrollTrigger: {
88            trigger: imageWrapper,
89            start: "top 80%",
90            toggleActions: "play none none none",
91            once: true,
92          },
93        }
94      );
95    });
96});
97
98//04. Animate-News ////////////////////////////////////////////////////////////////////////
99
100gsap.from(".news-container", {
101  scrollTrigger: {
102    trigger: ".news-container",
103    start: "top 85%",
104    toggleActions: "play none none none",
105  },
106  x: -100,
107  scale: 0.95,
108  opacity: 0,
109  duration: 1.2,
110  ease: "power3.out",
111});
112
113//05. Animate-Gallery ////////////////////////////////////////////////////////////////////////
114
115gsap.from(".gallery-carousel", {
116  scrollTrigger: {
117    trigger: ".gallery-carousel",
118    start: "top 85%",
119    toggleActions: "play none none none",
120  },
121  x: 100,
122  scale: 0.95,
123  opacity: 0,
124  duration: 1.2,
125  ease: "power3.out",
126});