https://www.ontrac.com/wp-content/themes/ontrac/assets/js/gsap-animations.js?v=20261002022739

1gsap.registerPlugin(ScrollTrigger);
2
3function init() {
4  const elementsToAnimate = [
5    { id: "#gsap-v01", animation: { y: -100 } },
6    { id: "#gsap-h01", animation: { x: -100 } },
7    { id: "#gsap-h02", animation: { y: -100 }, trigger: "#gsap-h02" },
8    { id: "#gsap-h03", animation: { x: -100 }, trigger: "#gsap-h03" },
9    { id: "#gsap-h04", animation: { x: -100 }, trigger: "#gsap-h04" },
10    { id: "#gsap-h05", animation: { x: -100 }, trigger: "#gsap-h05" },
11    { id: "#gsap-h06", animation: { x: -100 }, trigger: "#gsap-h06" },
12    { id: "#gsap-h07", animation: { x: -100 }, trigger: "#gsap-h07" },
13    { id: "#gsap-h08", animation: { x: -100 }, trigger: "#gsap-h08" },
14    { id: "#gsap-p01", animation: { y: -100 } },
15    { id: "#gsap-p02", animation: { y: -100 }, trigger: "#gsap-h02" },
16    { id: "#gsap-p03", animation: { y: -100 }, trigger: "#gsap-h03" },
17    { id: "#gsap-p04", animation: { y: -100 }, trigger: "#gsap-h04" },
18    { id: "#gsap-p05", animation: { y: -100 }, trigger: "#gsap-h05" },
19    { id: "#gsap-p06", animation: { y: -100 }, trigger: "#gsap-h06" },
20    { id: "#gsap-p07", animation: { y: -100 }, trigger: "#gsap-h07" },
21    { id: "#gsap-p08", animation: { y: -100 }, trigger: "#gsap-h08" },
22    {
23      id: "#gsap-sec01",
24      animation: { x: 100 },
25      trigger: "#gsap-sec01",
26      start: "0% 75%",
27    },
28    {
29      id: "#gsap-a01",
30      animation: { scale: 0, delay: 0.5, ease: "back.out(1.7)" },
31    },
32    {
33      id: "#gsap-a06",
34      animation: { scale: 0, delay: 0.5, ease: "back.out(1.7)" },
35    },
36    {
37      id: "#gsap-a07",
38      animation: { scale: 0, delay: 0.5, ease: "back.out(1.7)" },
39    },
40    {
41      id: "#gsap-a08",
42      animation: { scale: 0, delay: 0.5, ease: "back.out(1.7)" },
43    },
44    { id: "#gsap-img01", animation: { x: 100 } },
45    { id: "#gsap-img06", animation: { x: 100 } },
46    { id: "#gsap-img07", animation: { x: 100 } },
47    { id: "#gsap-img08", animation: { x: 100 } },
48  ];
49
50  elementsToAnimate.forEach(({ id, animation, trigger, start = "50% 75%" }) => {
51    const element = document.querySelector(id);
52    if (element) {
53      gsap.from(id, {
54        autoAlpha: 0,
55        delay: 0,
56        duration: 0.5,
57        ease: "power2.out",
58        ...animation,
59        ...(trigger && {
60          scrollTrigger: {
61            trigger,
62            start,
63            toggleActions: "play none none none",
64          },
65        }),
66      });
67    }
68  });
69
70  const counters = [
71    { id: "#gsap-stat01", targetValue: 35 },
72    { id: "#gsap-stat02", targetValue: 98 },
73    { id: "#gsap-stat03", targetValue: 1.9, decimalPlaces: 1 },
74  ];
75
76  counters.forEach(({ id, targetValue, decimalPlaces = 0 }) => {
77    const element = document.querySelector(id);
78    if (element) {
79      const counter = { val: 0 };
80      gsap.to(counter, {
81        val: targetValue,
82        duration: 1,
83        ease: "none",
84        scrollTrigger: {
85          trigger: "#gsap-sec01",
86          start: "50% 75%",
87          toggleActions: "play none none none",
88        },
89        onUpdate: function () {
90          element.innerText = counter.val.toFixed(decimalPlaces);
91        },
92      });
93    }
94  });
95
96  const logos = gsap.utils.toArray(".customer-logo");
97  if (logos.length) {
98    gsap.from(logos, {
99      scrollTrigger: {
100        trigger: ".logo-container",
101        start: "50% 75%",
102        toggleActions: "play none none none",
103      },
104      autoAlpha: 0,
105      scale: 0.8,
106      duration: 0.5,
107      ease: "power1.out",
108      stagger: 0.1,
109    });
110  }
111
112  const cards = gsap.utils.toArray(".card");
113  if (cards.length) {
114    cards.forEach((card, i) => {
115      gsap.from(card, {
116        scrollTrigger: {
117          trigger: "#gsap-card01",
118          start: "50% 75%",
119          toggleActions: "play none none none",
120        },
121        autoAlpha: 0,
122        y: 50,
123        duration: 1,
124        delay: i * 0.1,
125        ease: "power2.out",
126      });
127    });
128  }
129}
130
131window.addEventListener("load", function () {
132  init();
133});