Jump to content
Search Community

StaggerTo Not working

Guest
Moderator Tag

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

Link to comment
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
Link to comment
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

Link to comment
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

Link to comment
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 1
Link to comment
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

Link to comment
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
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...