Guest Posted February 3, 2020 Share Posted February 3, 2020 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 More sharing options...
GreenSock Posted February 3, 2020 Share Posted February 3, 2020 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). 1 Link to comment Share on other sites More sharing options...
Guest Posted February 3, 2020 Share Posted February 3, 2020 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 More sharing options...
ZachSaucier Posted February 3, 2020 Share Posted February 3, 2020 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 1 Link to comment Share on other sites More sharing options...
Guest Posted February 3, 2020 Share Posted February 3, 2020 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 More sharing options...
ZachSaucier Posted February 3, 2020 Share Posted February 3, 2020 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 1 Link to comment Share on other sites More sharing options...
Guest Posted February 3, 2020 Share Posted February 3, 2020 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 More sharing options...
ZachSaucier Posted February 3, 2020 Share Posted February 3, 2020 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. 2 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted February 3, 2020 Share Posted February 3, 2020 3 minutes ago, erayner said: GSAP 3 has just been released a few days ago correct? The latest update to GSAP 3 was (3.1.1), but version 3 itself was released at the start of November (3 months ago) 😉 https://greensock.com/3-release-notes/ 3 Link to comment Share on other sites More sharing options...
Guest Posted February 3, 2020 Share Posted February 3, 2020 😮 guess i've been out of the banner game for longer than I thought! cheers guys! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now