bitworking / react-scrollmagic

React components for ScrollMagic
https://bitworking.github.io/react-scrollmagic/
371 stars 64 forks source link

Multiple timelines inside a <Scene> #17

Closed allan-walker closed 5 years ago

allan-walker commented 5 years ago

Hi!

Great library, I'm loving it so far.

Is there a way to get multiple timelines inside a scene? In the docs I've noticed it says "From version 2 on it also works with a react-gsap Tween or Timeline component as direct child." An das Scene only accepts one child - is there any way to get two timelines that I want to run concurrently triggering from the same scroll events?

If I wrap the two timelines in a

, the animation just gets triggered on page load, not bound to scrollmagic. Any ideas?

bitworking commented 5 years ago

You can work with the render prop and pass the progress manually to the timeline or/and nest a timeline inside another timeline. Have a look at this example: https://github.com/bitworking/react-scrollmagic/blob/master/example/src/components/ScrollMagicExamples/Sticky2.js

allan-walker commented 5 years ago

Oh legend, thank you for that! It has worked a charm.