Search the Community
Showing results for tags 'gsap modifiers'.
Found 1 result
-
HERE is the CODE: https://stackblitz.com/edit/gsap-react-basic-f48716-ontwbj?file=src/App.js I want to create the carousel. Boxes move from left to right and when the left: 100% it should start from the left: -40% Here is my code: CSS: .moving_box{ position: absolute; left: -50%; } React: useLayoutEffect(() => { const ctx = gsap.context((self) => { var last_box_x_value = windowSize.innerWidth <= 424 ? "281%" : "200%"; gsap.set(".moving_box", { y: (i) => i == 2 ? last_box_x_value : "60px", left: (i) => i == 0 ? "0" : i == 1 ? "60%" : i == 2 ? "40%" : "" }); HowToSectionT1.current = gsap.timeline({ defaults: { repeat: -1, ease: "Linear.easeNone", align: "start" } }) .to(".box_1, .box_2, .box_3", { left: "+=100%", duration: 10, modifiers: { left: (x) => { // return x > 100 ? "-40%" : x + "%"; <- Problem is here return x; } } } ) }, HowToSectionRefContainer); // <- Scope! return () => ctx.revert(); // <- Cleanup! }, []); The Problem: The problem is when I try the this code the all the boxes move to right but not follow the modifier (when left is 100% go back to -40%). thanks
