Ecommerce Shopify WordPress Discussion

GSAP scrollTrigger animations don't work anymore after I use taxonomy filter or if images were lazy loaded

I have a Wordpress Website built with Elementor Pro. I made loop grid with flipboxes. For mobile and tablets I made rear container showing on scroll instead of hover. I used GSAP scrollTrigger. Here is my JS code: gsap.registerPlugin(ScrollTrigger); // Function to set up the flip effect function setupFlipEffect(element) { // Set up the timeline const tl = gsap.timeline({ scrollTrigger: { trigger: element, start: "top center", end: "center center+=200", scrub: true, }, ease: "power1.inOut", }); // Set up the flip animations tl.to(element.querySelector(".eael-elements-flip-box-front-container"), { opacity: 0 }) .to(element.querySelector(".eael-elements-flip-box-rear-container"), { opacity: 1 }, 0); // Ensure the rear container is visible during rotation gsap.set(element.querySelector(".eael-elements-flip-box-rear-container"), { visibility: "visible" }); } // Check if the screen width is below 1024px function isMobileScreen() { return window.innerWidth < 1024; } // Apply the flip effect only if it's a mobile screen const flipBoxes = document.querySelectorAll(".eael-elements-flip-box-flip-card"); if (isMobileScreen()) { flipBoxes.forEach((flipBox) => { setupFlipEffect(flipBox); }); } It works until I use filter (which is Elementor's Taxonomy Filter). I need to refresh page to make it work again. I tried to call ScrollTrigger.refresh(); at the end, but it doesn't solve the problem. If someone has any idea what I did wrong or forgot to write, please help.link to the website gsap.registerPlugin(ScrollTrigger); // Function to set up the flip effect function setupFlipEffect(element) { // Set up the timeline const tl = gsap.timeline({ scrollTrigger: { trigger: element, start: "top center", end: "center center+=200", scrub: true, }, ease: "power1.inOut", }); // Set up the flip animations tl.to(element.querySelector(".eael-elements-flip-box-front-container"), { opacity: 0 }) .to(element.querySelector(".eael-elements-flip-box-rear-container"), { opacity: 1 }, 0); // Ensure the rear container is visible during rotation gsap.set(element.querySelector(".eael-elements-flip-box-rear-container"), { visibility: "visible" }); } // Check if the screen width is below 1024px function isMobileScreen() { return window.innerWidth < 1024; } // Apply the flip effect only if it's a mobile screen const flipBoxes = document.querySelectorAll(".eael-elements-flip-box-flip-card"); if (isMobileScreen()) { flipBoxes.forEach((flipBox) => { setupFlipEffect(flipBox); }); } ScrollTrigger.refresh();
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.