Share Posted September 1, 2016 Hi, First I want to say I'm really happy that I'm using GSAP! it's wonderful .. Please check out my Pen ... Here we have 3 sets of elemnts and I want to stagger the 3 of them with a stagger time of sy 0.1s and simultaneously stagger the elemnts inside them .. right now the elements of the second block wont start their animation until the last elemnt of the previous block animates ...so basically I want to stagger 3 blocks of staggering elements, I don't want one block to wait until the previous one is done. and I have to start the whole function with $(".fade-scroll").each( ... so please don't suggest to change that also I dont want to use setTimeout functionsomehow by getting ".quick-info-item" and ... would be greatI'll appreciate it very much if anyone could help me.. See the Pen ALBpkX by ershad989 (@ershad989) on CodePen Link to post Share on other sites
Share Posted September 1, 2016 Hello spartan89, and welcome to the GreenSock forum! It looks like since you are sequencing your tweens after each() loop. Then you should take advantage of using the position parameter, so can have each tween run in sequence but with offsets like. The position parameter is the last parameter in the staggerFrom() http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/staggerFrom/ .staggerFrom( targets:Array, duration:Number, vars:Object, stagger:Number, position:*, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteScope:* ) staggerFrom() parameters: targets:Array duration:Number vars:Object stagger:Number position:* onCompleteAll:Function onCompleteAllParams:Array onCompleteScope:* Understanding the position parameter is key to mastering TimelineMax and TimelineLIte. Also this can help you with sequencing your tweens with TweenMax and TimelineMax Let us know if that helps! 1 Link to post Share on other sites
Solution Share Posted September 2, 2016 Hi and welcome to the GreenSock forums, Thanks for the demo. You were very close. I think this is the behavior you are after: function fade_scroll_animation() { var $anim_scroll = $(".quick-info-item"), anim_time = .5, anim_stagger = 0.2, initial_delay = 2, easing = Power2.easeInOut, elem_y = 40; var tl = new TimelineLite(); $anim_scroll.each(function(index, element) { var $this = $(this), $anim = $this.find(".anim-el"); //this animates each .anim-el in each .quick-info-item //this stagger gets create 3 times and added to the tl which is created outside the each() loop tl.staggerFrom($anim, anim_time, { y: elem_y, opacity: 0, ease: easing}, anim_stagger, index * 0.2); }); } http://codepen.io/GreenSock/pen/QKWgRG?editors=0010 The trick is that I changed what $anim_scroll selects to $(".quick-info-item") .quick-info-item is the container for each group of 3 anim-el things. So basically for each .quick-info-item we now grab each anim-el inside of it and do a stagger. We then start the stagger on the next group of anim-el items before the previous one ends. 3 Link to post Share on other sites
Author Share Posted September 4, 2016 So basically for each .quick-info-item we now grab each anim-el inside of it and do a stagger. We then start the stagger on the next group of anim-el items before the previous one ends. Thank you I exactly want to have that effect but I didn't mention this, I am using ScrollMagic as well and I need to have this effect for a couple of groups of these quick-info-items, it is a scroll animation that occurs on scroll, I dont want to write a code for every one of these groups .. so here is my actual code: function fade_scroll_animation() { var $anim_scroll = $(".fade-scroll"), $anim_text_g = $(".anim-text"), anim_time = .7, anim_stagger = 0.1, initial_delay = 0.1, easing = Power2.easeInOut, elem_from_top = false, elem_y = "40"; $anim_scroll.each(function() { var $this = $(this), $anim = $this.find(".anim-text"); var tl = new TimelineMax(); tl.staggerFrom($anim, anim_time, { y: elem_y, opacity: 0, ease: easing, delay: initial_delay }, anim_stagger); scene = new ScrollMagic.Scene({ triggerElement: this, // triggerHook: "onEnter", }) .setTween(tl) .addIndicators() .addTo(scrollMagicController) .reverse(true); }); } fade_scroll_animation(); I have to start the function with this : $anim_scroll.each(function() { ... )} then I have to write a Tween for it which somehow gets an array of items inside .quick-info-item and the staggers them while staggering the .quick-info-item elemnts themselves I'm not sure if it's possible Link to post Share on other sites
Author Share Posted September 4, 2016 Let us know if that helps! Jonathan Thank you I know how positioning works but I dont know how is it going to help me achive that effect .. I think my problem is that I don't know how to get my target elemnts Link to post Share on other sites
Share Posted September 5, 2016 The reason that would help is because you have the stagger which will offset the timing of each stagger since your using the stagger method. Then by using the position parameter you offset the timing of when each tween runs offsetting when each group gets animated in. That is why the position parameter will work! That is why you notice in Carl's example he uses index * 0 which is so each tween gets a sort of stagger for each tween. - stagger:number offsets each element in the staggerFrom() tween - position:number offsets each tween big difference between the two and why that would help you. Carl shows this technique in his example above. 2 Link to post Share on other sites
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