Obaida Zeino

wow that was too easy. been stuck on this for a while. thank you sir.

@Rodrigo I have modified the code based on your feedback and got it to the point where my local code is at where it animates on initial render but does not consider the toggle actions and scroll trigger. also, the split text doesn't seem to work? kindly check it out and let me know your suggestions.

i have a wide container in my react next app which i am animating horizontally on scroll using gsap. this container has many elements and divs of elements which i want to animate when they enter and reverse when they leave the viewport. keep in mind they are inside of the container that is being animated horizontally on scroll. this setup is only for desktop therefore i am also using match media. unfortunately this demo on stackblitz is not exactly where my code is at, my code animates the tweens but only on initial render and pays no attention to scroll triggers or toggle actions. https://stackblitz.com/edit/stackblitz-starters-hz2ve1?file=app%2Fpage.tsx kindly let me know why this is so and how to fix it. I am no expert in gsap but have read the documentation and this is where i am so far. here is the usegsap code: useGSAP(() => { let mm = gsap.matchMedia(); const width = containerRef.current.offsetWidth; // Get the offsetWidth of the container gsap.registerPlugin(SplitText); gsap.registerPlugin(ScrollTrigger); mm.add( { // set up any number of arbitrarily-named conditions. The function below will be called when ANY of them match. isDesktop: `(min-width: 769px)`, isMobile: `(max-width: 768px)`, }, (context) => { // context.conditions has a boolean property for each condition defined above indicating if it's matched or not. let { isDesktop, isMobile } = context.conditions; let containerAnimation = gsap.to(`.${styles.container}`, { x: -8500, // change padding on main in css accordingly ease: "none", scrollTrigger: { trigger: `.${styles.container}`, pin: true, scrub: 1, end: `+=${width}`, } }); const titleSplit = new SplitText(titleRef.current, { type: "words,chars" }); console.log(titleSplit) gsap.fromTo(titleSplit.chars,{ y: -100, stagger: 0.05, duration: 1, scrollTrigger: { trigger: titleRef.current, start: isDesktop ? "left 80%" : "top 80%", end: isDesktop ? "right 20%" : "bottom 20%", toggleActions: "play reverse play reverse", horizontal: isDesktop ? true : false, containerAnimation: isDesktop ? containerAnimation : "", markers: true, }, }, { y:0 }) gsap.fromTo(`.${styles.black}`,{ scaleX: 0, duration: 1, transformOrigin: "0 0", scrollTrigger: { trigger: `.${styles.black}`, start: isDesktop ? "left 80%" : "top 80%", end: isDesktop ? "right 20%" : "bottom 20%", toggleActions: "play reverse play reverse", horizontal: isDesktop ? true : false, containerAnimation: isDesktop ? containerAnimation : "", markers: true, }, },{ scaleX:1, }) return () => { // optionally return a cleanup function that will be called when none of the conditions match anymore (after having matched) // it'll automatically call context.revert() - do NOT do that here . Only put custom cleanup code here. }; } );