Jump to content


Synchronize Draggable with ScrollMagic scene

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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! 


  • 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.