<Timeline /> playState does not work when inside <Reveal />

[capi1O]

I can get to control <Timeline /> when placed inside a <Reveal />, I also try to pass playState prop on reveal itself since

The Reveal component is basically an Intersection Observer and a Timeline component combined.

source: https://bitworking.github.io/react-gsap/src-components-reveal

However playState is not a prop of Reveal so this does not work.

My use case is that I need to wait for all the elements of the animation to be ready before starting the animation.

As a workaround I am controlling the animation manually using a mutation observer.

[bitworking]

I do not fully understand your usecase. The Reveal component only knows 2 states. The included Timeline plays if the first child is intersecting and pauses if no more child is intersecting. If you need more control over the scroll animation you could also use the new ScrollTrigger plugin. It's like ScrollMagic but already included. Here is an example how you can use it: https://github.com/bitworking/react-gsap/blob/master/packages/playground/src/examples/ScrollTrigger.tsx

[capi1O]

Mu use case is that I need to wait for some elements to be loaded before starting the animation. I am animating a stripe image on <canvas> but I need this image to be loaded before starting the animation.Therefore I have a flag animationLoaded. I would like my Timeline inside Reveal to play when revealed if animationLoaded true, and if it is not wait until it is then play.

I looked at scroll trigger but I don't really understand.

Right now I am trying something else, not using Reveal anymore, but putting the Timeline inside <Controls> and trying to control its playState. The thing is because the content (the component passed as Timeline target) is a child of Timeline (actually a render prop), it is re-rendered every time I am changing the playState.

I know this is a different issue, sorry for that.