Jump to content
Search Community

Tween doesn't work on first scroll (ScrollMagic)

Becca test
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



I have a problem with my first ScrollMagic Animation.
I would like to fade in the boxes on scrolling down. This works fine except for the first time. When I scroll down for the first time the values like opacity don't "tween", they switch directly from 0 to 1. After that I can scroll up- and down with a working animation.
It's like some kind of setting is missing. Do you have an idea what exactly is missing?


This is my codepen: 

See the Pen ?editors=0010 by becca1811 (@becca1811) on CodePen

Thanks, Becca

See the Pen ?editors=0010 by becca1811 (@becca1811) on CodePen

Link to comment
Share on other sites

Thanks for the demo. It appears to me that the tweens are running as soon as the page loads.

I made a slight change to make the tweens slower and added scaling: 

See the Pen OEJWGY?editors=0010 by GreenSock (@GreenSock) on CodePen



If you look at the pen in a larger browser window you will see that any element in the viewport animates in on page load... most likely due to the fact that it is above its respective trigger.


I think with the opacity and slight y changes, it was just hard to tell it was happening on page load. 

It looks to me that things are working as they should.


I don't really use ScrollMagic and its not one of GreenSock's products, so please keep in mind there is very little we can do to actually support it.

Unfortunately it looks like the project has been abandoned for a few years now, but for more ScrollMagic help it might be worth filing an issue here:






  • Like 3
Link to comment
Share on other sites

Thanks a lot! 
I saw that ScrollMagic seems to be abandoned, but I thought it was still a good choice for scroll-related animations (in particular control the animation speed with the speed of scrolling). Is there a better, more modern plugin you would recommend? 

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