https://accionclimatica-alc.org/wp-content/themes/accionclimatica-child/assets/js/animation.js?ver=1753223525

1/*
2* ANIMATIONS
3* .slide-down-with-fade
4* .text-resalted
5* .text-word-animated
6* .fade-in
7*/
8
9jQuery(document).ready(function ($) {
10  // Registrar ScrollTrigger en GSAP
11  gsap.registerPlugin(ScrollTrigger);
12
13  // Seleccionar todos los elementos con la clase `slide-down-with-fade`
14  gsap.utils.toArray(".slide-down-with-fade").forEach((element) => {
15    gsap.fromTo(
16      element,
17      { opacity: 0, y: -50 },
18      {
19        opacity: 1,
20        y: 0,
21        duration: 1,
22        ease: "power2.out",
23        scrollTrigger: {
24          trigger: element,
25          start: "top 80%", // Inicia cuando el 80% del elemento es visible
26          end: "top 20%", // Termina cuando el 20% del elemento aún es visible
27          toggleActions: "play reverse play reverse", // Se ejecuta en cada scroll
28        }
29      }
30    );
31  });
32});
33
34/*
35* Animaciones de elementos generales
36*/
37jQuery(document).ready(function ($) {
38  gsap.registerPlugin(ScrollTrigger);
39
40  $(".text-resalted b, .text-resalted strong").each(function () {
41    let $el = $(this);
42    let $bg = $("<span>").addClass("highlight-bg").appendTo($el);
43
44    gsap.fromTo(
45      $bg[0],
46      { width: "0%" },
47      {
48        width: "100%",
49        duration: 1.2,
50        ease: "power2.out",
51        scrollTrigger: {
52          trigger: $el[0],
53          start: "top 90%",
54          toggleActions: "play reset play reset",
55        },
56      }
57    );
58  });
59});
60
61/*
62* Cards slide up
63*/
64jQuery(document).ready(function ($) {
65  gsap.registerPlugin(ScrollTrigger);
66
67  $(".cards").each(function () {
68    $(this).find(".card").each(function (index) {
69      gsap.fromTo(
70        $(this),
71        { y: 100, opacity: 0 },
72        {
73          y: 0,
74          opacity: 1,
75          duration: 1,
76          ease: "power2.out",
77          delay: index * 0.5, // 🔹 Resetea el índice dentro de cada grupo
78          scrollTrigger: {
79            trigger: $(this),
80            start: "top 80%",
81            toggleActions: "play none none none",
82          },
83        }
84      );
85    });
86  });
87});
88
89/*
90* Text Word Animated
91*/
92jQuery(document).ready(function ($) {
93  gsap.registerPlugin(ScrollTrigger);
94
95  $(".text-word-animated").each(function () {
96    let split = new SplitType(this, { types: "words" });
97
98    gsap.from(split.words, {
99      y: -50,
100      opacity: 0,
101      rotation: "random(-10, 10)",
102      duration: .5,
103      ease: "back",
104      stagger: 0.15,
105      scrollTrigger: {
106        trigger: $(this),
107        start: "top 70%",
108        toggleActions: "play none none none",
109      },
110    });
111  });
112});
113
114/* 
115* FADE IN
116*/
117jQuery(document).ready(function ($) {
118  gsap.registerPlugin(ScrollTrigger);
119
120  $(".fade-in").each(function () {
121    gsap.fromTo(
122      $(this),
123      { opacity: 0, y: 10 }, // 🔹 Inicia con opacidad 0 y un pequeño desplazamiento hacia abajo
124      {
125        opacity: 1,
126        y: 0,
127        duration: 1,
128        ease: "power2.out",
129        scrollTrigger: {
130          trigger: $(this),
131          start: "top 70%",
132          toggleActions: "play none none none",
133        },
134      }
135    );
136  });
137});
138
139/* Testimonials */
140jQuery(document).ready(function ($) {
141  gsap.registerPlugin(ScrollTrigger);
142
143  $(".comillas__l svg").each(function () {
144    gsap.fromTo(
145      this,
146      {
147        scale: 0.8,
148        opacity: 0,
149        rotate: 40
150      },
151      {
152        scale: 1,
153        opacity: 1,
154        rotate: 0,
155        duration: 1,
156        ease: "power2.out",
157        scrollTrigger: {
158          trigger: $(this),
159          start: "top 70%",
160          toggleActions: "play none none none",
161        }
162      }
163    );
164  });
165
166  $(".comillas__r svg").each(function () {
167    gsap.fromTo(
168      this,
169      {
170        scale: 0.8,
171        opacity: 0,
172        rotate: -40
173      },
174      {
175        scale: 1,
176        opacity: 1,
177        rotate: 0,
178        duration: 1,
179        ease: "power2.out",
180        scrollTrigger: {
181          trigger: $(this),
182          start: "top 70%",
183          toggleActions: "play none none none",
184        }
185      }
186    );
187  });
188});