Ritik Posted December 15, 2023 Share Posted December 15, 2023 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 See the Pen JjxQJzZ by iamnimonic (@iamnimonic) on CodePen Link to comment Share on other sites More sharing options...
Toso Posted December 15, 2023 Share Posted December 15, 2023 hi @Ritik most of your questions are already in the docs so i didn't want to make my answer 100 lines so focused only on few things that might help I would recommend you use signals instead of react states, preact signals are faster and do crazy work under the hood and work like a charm with react, especially when you are trying to update something in a different component and you do not want to rerender some extra component with it so take a look on this one https://preactjs.com/guide/v10/signals/ https://www.npmjs.com/package/@preact/signals-react also, this stackblitz collection will help you with future demos since you are using react https://stackblitz.com/@GreenSockLearning/collections The last thing you can now use usaGSAP hook for react https://github.com/greensock/react and you can still pass the func as you want inside the timeline but here you are animating all the sections with one tween so you will get only one call like onStart will be working one time for the whole tween not for each section there, not sure if you asking about timeline properties or scrollTrigger properties but both have their properties 1 Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted December 15, 2023 Solution Share Posted December 15, 2023 Hi, 1 hour ago, Ritik said: 1. why is the progress of timeline always equal to 0? Is it because scrub is true? This is because you have a logical issue in your animation. You are passing a ScrollTrigger conifguration to a child tween on a timeline: https://gsap.com/resources/st-mistakes#nesting-scrolltriggers-inside-multiple-timeline-tweens Moving the ScrollTrigger configuration to the Timeline fixes this and the Timeline progress can be tracked down: timelineRef.current = gsap.timeline({ scrollTrigger: { trigger: container, pin: true, scrub: 2, snap: 1 / (sections.length - 1), markers: true, start: "top top", end: `+=${container.offsetWidth}`, } }) 2 hours ago, Ritik said: 2. How do I control timeline, like start, pause, reset, reverse, if the tweens are scroll based? You can use toggleActions instead of scrub or use the onEnter/Back onLeave/Back callbacks as well, but you can't have both, since it'll result in unexpected behaviour. 2 hours ago, Ritik said: 3. How do I control timeline in react? There are plenty of ways to do that, you can use event handlers like any normal JS app (regardless of the framework or if it's a VanillaJS project) or you can use state as well. 2 hours ago, Ritik said: 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? This is a bit of a pickle. I would use very specific callbacks like onStart, onComplete and onReverseComplete. I would stay away from onUpdate since that will trigger 60 times per second and updating the state of a component that much would result in a lot of re-renders which would be super wasteful. I'd recommend you to check the resources we have here in order to learn more about using GSAP in React apps: https://gsap.com/resources/React Happy Tweening! 3 Link to comment Share on other sites More sharing options...
Cassie Posted December 15, 2023 Share Posted December 15, 2023 Specifically this section! - https://gsap.com/resources/react-basics#creating-and-controlling-timelines 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now