Jump to content
GreenSock

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

StaggerTo Not working

Recommended Posts

Hey!

 

So I've created a sort of 'loop' layout where I can just add a class to and element and it will  automatically create a sort of parallax effect (move up or down etc). However, for some reason, my staggerTo class is not working.. ie, all elements appear at the same time on scroll.

 

$('.staggerEntry').each(function(){

  var staggerEntry = TweenMax.staggerTo($(this), 1, {opacity: 1}, 0.2);

  new ScrollMagic.Scene({
    triggerElement: this,
    reverse: false
  })
    .setTween(staggerEntry)
    .addIndicators(true)
    .addTo(controller)

});

 

Please take a look at my codepen - you can see what I mean. I have a feeling it has something to do with the loop, but I can't tell.

 

Cheers

See the Pen NWPQZWa by erayner (@erayner) on CodePen

Share this post


Link to post
Share on other sites

I think the problem is that TweenMax.staggerTo() returns an ARRAY of tweens, but I assume ScrollMagic's setTween() expects a tween/timeline instance, right? ScrollMagic isn't a GreenSock product, so we can't really support it here but I suspect that the array/tween thing is the problem. 

 

Maybe you could toss those into a TimelineMax instead and just feed that in. 

 

Of course I'd recommend upgrading to GSAP 3 when you can, but I'm not sure ScrollMagic has been updated to accommodate GSAP 3 quite yet (last I heard they were working on that). 

  • Like 1

Share this post


Link to post
Share on other sites

Hey Jack,

 

Thanks for your reply. I'm still not 100% sure that's the culprite because in the scrollmagic example, he gets it to work easy with a stagger.

https://scrollmagic.io/examples/advanced/advanced_tweening.html

 

<script>
  // build tween
  var tween = TweenMax.staggerFromTo(".animate4", 2, {left: 700}, {left: 0, ease: Back.easeOut}, 0.15);

// build scene
var scene = new ScrollMagic.Scene({triggerElement: "#trigger4", duration: 300})
    .setTween(tween)
    .addIndicators({name: "staggering"}) // add indicators (requires plugin)
    .addTo(controller);

</script>

 

I have a feeling it's the .each loop.. maybe the tween should be outside of the loop? because otherwise I am writing
 

TweenMax.staggerTo($(this), 1, {autoAlpha: 1}, 1)
TweenMax.staggerTo($(this), 1, {autoAlpha: 1}, 1)
TweenMax.staggerTo($(this), 1, {autoAlpha: 1}, 1)
TweenMax.staggerTo($(this), 1, {autoAlpha: 1}, 1)

 

And they are all firing at the same time possibly? what do you think about that?

 

Cheers

Share this post


Link to post
Share on other sites

What are you trying to do with the each loop? Staggers are meant to work with multiple elements...

See the Pen YzPmomx by GreenSock (@GreenSock) on CodePen

  • Like 2

Share this post


Link to post
Share on other sites

Ah cheers, that works much better. I have a loop which runs so that I can add the same class to many elements on the same page without having to specify which element is the correct to animate when you scroll. Essentially attempting to make reusable code for a wordpress site.

ie..

$('.parallaxMoveUp').each(function(){

  var parallaxMoveUp = TweenMax.to($(this), 1, {y: -50});

  new ScrollMagic.Scene({
    triggerElement: this,
    duration: '100%'
  })
    .setTween(parallaxMoveUp)
    .addTo(controller)

});

$('.parallaxMoveDown').each(function(){

  var parallaxMoveDown = TweenMax.to($(this), 1, {y: 50});

  new ScrollMagic.Scene({
    triggerElement: this,
    duration: '100%'
  })
    .setTween(parallaxMoveDown)
    .addTo(controller)

});

$('.fadeInUp').each(function(){

  var fadeInUp = TweenMax.to($(this), 1, {y: -50, opacity: 1});

  new ScrollMagic.Scene({
    triggerElement: this,
    reverse: false
  })
    .setTween(fadeInUp)
    .addTo(controller)

});

 

I think I was over complicating it for the stagger.

 

Thanks for your help/time Zach :)

 

Cheers

Share this post


Link to post
Share on other sites
14 minutes ago, erayner said:

I have a loop which runs so that I can add the same class to many elements on the same page without having to specify which element is the correct to animate when you scroll. Essentially attempting to make reusable code for a wordpress site.

You're likely looking for something along the lines of this then:

$('.parallaxMoveUp, .parallaxMoveDown').each(function() {
  console.log("Fire for each element")

  var controller = new ScrollMagic.Controller();

  var tween = TweenMax.staggerTo('.staggerEntry', 1, {opacity: 1}, 0.2);

  new ScrollMagic.Scene({
    triggerElement: this,
    reverse: false
  })
    .setTween(tween)
    .addIndicators(true)
    .addTo(controller)
});

As Jack said, we encourage people to use GSAP 3 as it has a bunch new features and a simplified API :) 

  • Like 2

Share this post


Link to post
Share on other sites

GSAP 3 has just been released a few days ago correct? just on time restrictions for this project but as soon as I have a bit of time, I will look into it! :)

(been using gsap for about 2 years now, usually use it for banners)
Thanks

Share this post


Link to post
Share on other sites
6 minutes ago, erayner said:

GSAP 3 has just been released a few days ago correct?

GSAP 3 was released at the start of November last year, but GSAP 3.1 was released only a few days ago :) Read more here:

 

6 minutes ago, erayner said:

(been using gsap for about 2 years now, usually use it for banners)

Great! So glad to hear it.

  • Like 2
  • Haha 1

Share this post


Link to post
Share on other sites

😮 guess i've been out of the banner game for longer than I thought! :) cheers guys!

  • Haha 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×