Jump to content


StaggerFrom always runs on page load not on scroll magic event

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'm trying to get a staggerFrom animation to occur on a scrollmagic event with the following code however, the stagger always seems to happen instantly on page load rather than waiting for the scroll magic event to fire. 


 var tween = TweenMax.staggerFrom(targetDivs, 2, { opacity: 0 }, 0.5),
         scene = new ScrollMagic.Scene({
             triggerElement: element,
             reverse: false,

        scene.addIndicators({ name: "staggering" });


Using other simple tweens like this work as expected without any issues:

var tween = TweenMax.from(element, .75, { opacity: 0, x: -40 })

Is there anything specific about 'staggerFrom' which would stop this from working? 

Link to comment
Share on other sites

Hi MrTea  :)


Welcome to the GreenSock forum.


Sounds like you're looking for immediateRender to be set to false. From the docs:

  • immediateRender : Boolean - Normally when you create a tween, it begins rendering on the very next frame (update cycle) unless you specify a delay. However, if you prefer to force the tween to render immediately when it is created, setimmediateRender to true. Or to prevent a from() from rendering immediately, set immediateRender to false. By default, from() tweens set immediateRender to true.


More reading: https://greensock.com/docs/#/HTML5/Animation/TweenMax/from/


Hopefully that helps. Happy tweening.


  • Like 3
Link to comment
Share on other sites

Thanks for the swift reply. I'd seen this property and assume it would be set like this:

var tween = TweenMax.staggerFrom(targetDivs, 2, { opacity: 0, immediateRender: false }, 0.5),

However, this makes no difference - the stagger still runs on pageLoad rather than waiting for the scrollmagic trigger. Is the above the correct way to implement this? 

Link to comment
Share on other sites

That looks right to me. Is the trigger element already in view on page load?


If you could create a CodePen demo, we'll have a better chance of troubleshooting this for you. Here's some more info about that:




Here's an empty CodePen that already loads the ScrollMagic and GSAP scripts. You can fork it and drop in your HTML, CSS and JavaScript.


See the Pen wgLJWE by PointC (@PointC) on CodePen


Just post a link back here when that's ready and we'll take a look for you. Thanks.

  • Like 2
Link to comment
Share on other sites

Thanks - frustratingly, in my codepen this works as expected!


See the Pen ygdMzL by MrTG (@MrTG) on CodePen


In my code where this isn't working, the trigger element isn't yet in view (as I can see from the indicators) yet this still seems to fire on page load.I'll have to investigate further.

Link to comment
Share on other sites

Yep - looks like it works fine in the demo.


I'm not sure what to tell you then other to maybe check the version of the scripts. The demo has 2.05 of ScrollMagic and 1.19.1 of GSAP.


Good luck and happy tweening.


Link to comment
Share on other sites

I'll need to do more testing to confirm the issue but I think it's due to the order in which the scripts are pulled in. This seems to cause the issue:


    <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
    <script src="js/TweenMax.min.js"></script>

While this fixes it:


  <script src="js/TweenMax.min.js"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js'></script>
  • Thanks 1
Link to comment
Share on other sites

Glad you found the solution. :)


The ScrollMagic GSAP plugin is dependent on TweenMax so that makes sense to load TweenMax first.


Happy tweening.


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