https://truebluesalon.com/wp-content/themes/ph-base-tailwind/assets/js/homepage-anims.js?ver=1.0.0

1(function() {
2	//AOS - Footer
3AOS.init();
4	
5//   console.log('test test');
6  addEventListener('scroll', e => {
7    window.scrollY > 0 ? document.body.classList.add('scrolled') : document.body.classList.remove('scrolled')
8  })
9  
10console.clear();
11
12gsap.registerPlugin(ScrollTrigger, ScrollToPlugin); 
13// let mSmall = gsap.matchMedia();
14// let mm = gsap.matchMedia();
15
16// mm.add("(min-width: 800px)", () => {
17  gsap.to(".intro-img.img1", {
18    scrollTrigger: {
19      trigger: ".intro-trigger",
20      start: "top center",
21      end: "bottom top",
22      scrub: true,
23       pinType: "fixed",
24       anticipatePin: 1,
25    },
26    scale: 1,
27    duration: 1,
28    ease: "power1.out"
29  });
30
31  gsap.to(".intro-img.img2", {
32    scrollTrigger: {
33      trigger: ".intro-trigger2",
34      start: "top center",
35      end: "bottom top",
36      scrub: true,
37       pinType: "fixed",
38       anticipatePin: 1
39    },
40    scale: 1,
41    duration: .5,
42    // ease: "power1.out"
43  });
44
45   
46
47
48
49//PROMO ANIMATION
50console.clear();
51
52/// Ensure GSAP and ScrollTrigger are loaded and registered
53if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined' && typeof ScrollToPlugin !== 'undefined') {
54  gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
55}
56
57
58
59//INTRO TEXT ANIM
60  gsap.registerPlugin(ScrollTrigger, SplitText);
61
62    const split = new SplitText(".intro-title", { type: "words" });
63
64    gsap.from(split.words, {
65      scrollTrigger: {
66        trigger: ".intro-img.img1",
67        start: "top 80%",
68        toggleActions: "play none none none",
69      },
70      opacity: 0,
71      y: 50,
72      stagger: 0.1,
73      duration: 1,
74      ease: "power4.out"
75    });
76    const split2 = new SplitText(".intro-p1", { type: "words" });
77
78    gsap.from(split2.words, {
79      scrollTrigger: {
80        trigger: ".intro-img.img1",
81        start: "top 80%",
82        toggleActions: "play none none none",
83      },
84      opacity: 0,
85      y: 50,
86      stagger: 0.005,
87      // duration: .25,
88      delay: 0.5,
89      ease: "power4.out"
90    });
91    const split3 = new SplitText(".intro-p2", { type: "words" });
92
93    gsap.from(split3.words, {
94      scrollTrigger: {
95        trigger: ".intro-img.img1",
96        start: "top 80%",
97        toggleActions: "play none none none",
98      },
99      opacity: 0,
100      y: 50,
101      stagger: 0.005,
102      // duration: .25,
103      delay: 1,
104      ease: "power4.out"
105    });
106
107
108/* PROMOS DESKTOP*/
109
110	var controlsContainer = document.getElementById('controls-container'),
111	controlButtons = document.querySelectorAll('button.control'),
112    allImages = document.querySelectorAll('.image'),
113    imagesContainer = document.getElementById('images-container');
114
115	// Set data-active on the first image initially
116	if (allImages.length > 0) {
117	  allImages[0].setAttribute('data-active', 'active');
118	}
119	if (controlButtons.length > 0) {
120	  controlButtons[0].classList.add('is-active');
121	}
122
123	controlsContainer.onclick = function(e) {
124  var target = e.target,
125      dataTarget = target.getAttribute('data-image'),      
126      activeImage = document.getElementById(dataTarget);
127  
128  if (dataTarget) {
129    // Remove data-active from all images
130    for (var i = 0; i < allImages.length; i++) {
131      allImages[i].removeAttribute('data-active');
132    }
133
134    // Add data-active to the selected image
135    activeImage.setAttribute('data-active', 'active');
136
137    // Remove is-active from all control elements
138    var allControls = controlsContainer.children;
139    for (var j = 0; j < allControls.length; j++) {
140      allControls[j].classList.remove('is-active');
141    }
142
143    // Add is-active to the clicked control element
144    target.classList.add('is-active');
145  }  
146}
147
148
149
150
151})()