How to control timeline in react?

[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

See the Pen JjxQJzZ by iamnimonic (@iamnimonic) on CodePen

[Toso]

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 

 

[Rodrigo]

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!

[Cassie]

Specifically this section! -

 

https://gsap.com/resources/react-basics#creating-and-controlling-timelines