Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Anya

Synchronize Draggable with ScrollMagic scene

Recommended Posts

Hi guys!

I have a question about the way of synchronizing Draggable with Scrollmagic scene.

Basically i need to repeat exact same scene I have on scroll, but make it happen on drag of the progress bar. And can't figure out the right way to do it... Especially if the user decided to scroll when the progress bar is halfway..

Any suggestions?

I set up a simple pen to demonstrate.

Thanks so much for your amazing work!

 

See the Pen JBwQwj by slyka85 (@slyka85) on CodePen

Link to comment
Share on other sites

You can update Draggable using timeline's progress. You might want to tweak some calculations but this should get you started. The onDrag calculation assumes your page only contains the draggable. Maybe you will be able to use Scene's enter event and some element's height to do the calculation if you will have other content on page.

 

See the Pen bjzbVX?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Oh wow, @Sahil, this totally makes sense now, with the use of scrollTo to trigger the scrollMagic with the nested timelines. Thanks so much for your help! 

luxury-happy-meme-face-life-toys-art-jun

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×