Jump to content


ScrollMagic + GSAP Issue

Moderator Tag

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



Firstly, I beg a pardon for my JS knowledge.

Secondly, for the English...


So. I've got the 3-step animation of the object in 3 sections. I've illustrated it in codepen and simplified a little - in real dev version not only y-axis movement implemented.

If i refresh or load page above these 3 sections, everything works fine. All 3 steps works as it should be.


If load/refresh lower, or on the second, or third section - animation doesn't work properly backwards... Especially on the first part of the animation - "The Item" doesn't get right coordinates.

I hope that codepen version and my explanations would be enough to see the mistake. If not - I will upload site from offline to my test server and give a link.


Thank's for the help in advance!

See the Pen YRvyxg by sKonon (@sKonon) on CodePen

Link to comment
Share on other sites

I think issue has to do with ScrollMagic and how it handles tweens that are animating same property that conflicts. ScrollMagic is not GSAP product, you should try posting issue on Github. https://github.com/janpaepke/ScrollMagic


Alternate solution would to use fromTo tweens, with immediateRender disabled on all tweens except first one. And setting duration on your scenes, you will notice jumps because your element animates 400 pixels but you are scrolling only 300 pixels.


See the Pen BGVKdG by Sahil89 (@Sahil89) on CodePen


A better solution would be to use enter/leave events to create new 'to' tweens inside the event handler so there won't be conflicts.


When you define a to tween, GSAP will animate element from current position to the target position, so when you scroll and refresh all wrong values get recorded and create conflict.


When you define from tween, GSAP will animate from given position to current position. But by default immediateRender is set to true so GSAP will set your element in that position that's why you need to set it to false on 2nd and 3rd tween.



  • Like 5
Link to comment
Share on other sites


Thank you very much for reply!


I've tried setting immediateRender:false, fromTo, duration, all as you said - still the same( The 3rd animation (from the bottom) goes wrong... Maybe it would be better to make codepen example closer to the original dev-version to see the issue?

Writing to GitHub also.

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.