suhel

Members

suhel's Achievements

suhel started following gsap scrollers are not working correctly on initial load. on the initail load they are present on the previous section then the required one and when I referesh they come back to desired section. November 9, 2023
gsap scrollers are not working correctly on initial load. on the initail load they are present on the previous section then the required one and when I referesh they come back to desired section.

suhel posted a topic in GSAP

/// fourth section animation const aboutFourWrapper = document.querySelector('[aboutfour="wrapper"]'); const aboutFourHeading = document.querySelector('[aboutfour="heading"]'); const aboutFourCards = document.querySelectorAll('[aboutfourth="card"]'); function secFourAnimation() { gsap.set(aboutFourHeading, { opacity: 0, x: "100%" }); gsap.set(aboutFourCards, { opacity: 0, x: "100%" }); let tl = gsap.timeline({ scrollTrigger: { trigger: aboutFourWrapper, start: "top top", end: "bottom 80%", toggleActions: "play none none none" // markers: true } }); tl.to(aboutFourHeading, { opacity: 1, x: "0%", ease: "Power1.easeInOut", // Improved easing duration: 1.5 // Adjust the duration as needed (in seconds) }).to(aboutFourCards, { opacity: 1, x: "0%", ease: "Power1.easeInOut", // Improved easing stagger: 0.5, // Adjust the stagger between elements (in seconds) duration: 1.5 // Adjust the duration as needed (in seconds) }); } window.addEventListener("load", () => { secFourAnimation(); });