Ritik

Hi team In the attached code-pen link, div with class 'container' has a div with class 'wrapper' (bad name for a slider) with 6 sections (section tags). I've defined a GSAP timeline and stored it in a variable. I am referencing this timeline using useRef to use it. This timeline has a tween on sections and it animates them on the Xpercent All of this is scroll based using a Scroll-trigger with a scrub. The timeline is set to paused The things that I don't understand are 1. why is the progress of timeline always equal to 0? Is it because scrub is true? 2. How do I control timeline, like start, pause, reset, reverse, if the tweens are scroll based? 3. How do I control timeline in react? 4. What is the optimal way of updating react components that are based on a timeline's/tween's progress (eg. the progress bar) Currently, i am updating the progress bar based on the progress of scroll trigger, when I add a state variable and use it as a dependency in the useEffect and try to update it to comply with react, it doesn't work. What is the underlying issue? NOTE: I am animating the xPercent because I was further animating the scale of sections based on their position with respect to the viewport using container animations but that is too far fetched. Please help me understand

I followed this gsap forum thread and this comment by @rodrigo. Is this the way to animate on mount events? URL to stackblitz example (my code pen got locked )

Video with the issue .timeline({ scrollTrigger: { trigger: containerRef.current.querySelector(".containerDiv"), start: "top top", end: () => { const containerDiv = document.querySelector(".containerDiv"); return containerDiv ? `+=${containerDiv.offsetWidth}` : 0; }, pin: true, scrub: true, snap: { inertia: false, snapTo: "labelsDirectional", duration: { min: 0.2, max: 1.6 }, ease: "power3", delay: 0, onStart() { alert("snap started after a bit of scroll"); }, }, // onSnapComplete() { // alert("snap completed"); // }, onUpdate: (trigger) => { setProgressBar(trigger.progress); }, }, }) I want you to focus on the snap property of scrollTrigger, the video shows how onStart() is only triggered after a bit of scroll has happened. I am unable to understand why this delay is occurring. I'd create a minimal demo if this issue is not due to some common occurrence or my lack of understanding.

@Cassie why did @akapowl add .addPause() isn't the timeline defined to scrub?

I'm encountering a scoping issue when trying to use a GSAP timeline (tl1) inside a React component (MemberRenderer). The goal is to play the timeline when the user hovers over a specific element. However, I'm noticing that the tl1 timeline doesn't behave as expected and seems to have scoping issues. Here's a simplified version of the code: CODE THAT ISN'T WORKING import React, { useRef } from 'react'; import { gsap } from 'gsap'; function MemberRenderer(member) { const memberRef = useRef(); let tl1 = gsap.timeline({ paused: true }); tl1.to("#Aakash", { opacity: 0.2 }); const handleMouseEnter = (e) => { console.log("tl1", tl1); tl1.play(); }; // Rest of the code... } CODE THAT WORKS function MemberRenderer(member) { const memberRef = useRef(); const handleMouseEnter = (e) => { let tl1 = gsap.timeline({ paused: true }); tl1.to("#Aakash", { opacity: 0.2 }); console.log("tl1", tl1); tl1.play(); The handleMouseEnter function should play the tl1 timeline when the user hovers over the memberRef element. However, I'm encountering issues with scoping and the timeline doesn't play as expected. It seems like the tl1 instance is not being captured correctly inside the handleMouseEnter function. What could be causing this scoping issue and how can I resolve it to make the timeline play as intended when the user hovers over the element? I'd appreciate any insights or suggestions on how to fix this. Thank you! Apologies for not including a demo but this I am not sure how to convey.

I have a menu drawer that has a ul with 6li's in it next.js, react, gsap, tailwind. I need to animate them, currently I am creating timelines for each li and creating refs then on mouse enter and mouse leave on the lis I am manipulating the specific timeline (playing and pausing it) using the index. I wanted to know if this is the most optimised way of doing this or not? MenuDrawer.js

As you can observe in the code pen link, both the instances get triggered on interacting with any one of them. What concept am I missing? I guess this is because both button instances share the same ref. I am unsure. What is the gsap way of doing this? I read gsap context, This gsap thread, and gsap with react basics But I am still confused.