Open capi1O opened 3 years ago
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
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.
I can get to control
<Timeline />
when placed inside a<Reveal />
, I also try to pass playState prop on reveal itself sincesource: 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.