romain.gr Posted November 25, 2021 Share Posted November 25, 2021 Hi, There is something that doesn't make sens to me, I'm animating a timeline with stagger and other tweens, all must be "played" in the same time, I'm using for that the delay label : "sameTime" $('.section--title-1').each(function(){ var thisSpan = $(this).find('span'); var thisSquare = $(this).find('.square'); let titleTL = gsap.timeline({ scrollTrigger: { trigger: $(this), scrub: true, pin: true, pinSpacing: true, start: 'left left', end: () => {return '+=' + window.innerWidth * 2 + 'px'}, //markers: true, invalidateOnRefresh: true, refreshPriority: 1 } }); titleTL .to(thisSpan, {autoAlpha: 1, y: 0, ease: Power1.easeInOut, stagger: .25}, 'sameTime') .to(thisSquare, {x: -window.innerWidth + 100 + 'px'}, 'sameTime'); }); So the desired behaviour would be : the end of the square tween will happen at the same time as the end of the staggered animation, but that's not the case, the square tween finished before the span animation. I've found a workaround which is creating 2 different timelines, one for the stagger and one for the square animation : $('.section--title-2').each(function(){ var thisSpan = $(this).find('span'); var thisSquare = $(this).find('.square'); let titleTL = gsap.timeline({ scrollTrigger: { trigger: $(this), scrub: true, pin: true, pinSpacing: true, start: 'left left', end: () => {return '+=' + window.innerWidth * 2 + 'px'}, //markers: true, invalidateOnRefresh: true, refreshPriority: 1 } }); let squareTL = gsap.timeline({ scrollTrigger: { trigger: $(this), scrub: true, pin: true, pinSpacing: true, start: 'left left', end: () => {return '+=' + window.innerWidth * 2 + 'px'}, //markers: true, invalidateOnRefresh: true, refreshPriority: 1 } }); titleTL .to(thisSpan, {autoAlpha: 1, y: 0, ease: Power1.easeInOut, stagger: .25}, 'sameTime'); squareTL .to(thisSquare, {x: -window.innerWidth + 100 + 'px'}, 'sameTime'); }); The second version works great but I found that it's : 1: not very logic 2: a bit ugly Is there a way to make the first way working as I'm expecting or there's something I don't understand? Thank you See the Pen yLomYxb by romaingranai (@romaingranai) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted November 25, 2021 Share Posted November 25, 2021 Your stagger animation has a longer duration than the square animation because it has delays in it. You need to make your square animation have the same duration as the stagger. titleTL.to(thisSpan, {autoAlpha: 1, y: 0, ease: Power1.easeInOut, stagger: .25}, 'sameTime') .to(thisSquare, { x: -window.innerWidth + 100, duration: titleTL.duration(), }, 'sameTime'); 1 1 Link to comment Share on other sites More sharing options...
romain.gr Posted November 25, 2021 Author Share Posted November 25, 2021 No duration has been set, I'm using scrub and I've set the end trigger value to twice the screen width. I don't really want to create 2 different timelines and 2 scrollTrigger, I d like to use only one timeline and one scrollTrigger which include a simple tween and a stagger animation. Is it because I have stagger: .25? As i understand the duration is related to the scroll distance (in this case the end), the duration is how fast you scroll (?). Is it possible to achieve the result of animation 2 (2nd screen in the codepen) but only using one timeline and one scrollTrigger? Link to comment Share on other sites More sharing options...
OSUblake Posted November 25, 2021 Share Posted November 25, 2021 I just explained what was happening and posted the solution above. 1 Link to comment Share on other sites More sharing options...
OSUblake Posted November 25, 2021 Share Posted November 25, 2021 35 minutes ago, romain.gr said: As i understand the duration is related to the scroll distance (in this case the end), the duration is how fast you scroll (?). Duration with scrub is just like a percentage of the scroll distance. If you have 1 animation, the duration really means nothing. If you have an animation that is 1.75 seconds long, like your stagger, and then another animation that is 0.5 seconds long, like your square, then then the square animation will be active for 28% of the scroll, 0.5 / 1.75 = 0.28. Your stagger animation will last for 100% of the scroll, 1.75 / 1.75 = 1. 2 1 Link to comment Share on other sites More sharing options...
romain.gr Posted November 25, 2021 Author Share Posted November 25, 2021 @OSUblake Got it now, it starts at the same time but obviously the stagger takes longer. And the way to sync all tweens to start and end at the same time, is to use the duration attribute on simple tweens. But what if we have multiple stagger in the same timeline? Sorry for earlier answer, my bad, it was a long long day. I re-red it and tried, it clearly answers my question, so thanks for it and the detailed answer later. Link to comment Share on other sites More sharing options...
OSUblake Posted November 25, 2021 Share Posted November 25, 2021 2 hours ago, romain.gr said: But what if we have multiple stagger in the same timeline? Do you have an example? The concept would still be same, but how you make sure everything has the same duration might involve some calculating. Link to comment Share on other sites More sharing options...
romain.gr Posted November 25, 2021 Author Share Posted November 25, 2021 Yes, I guess we would need to find the longer staggered tween then find the other stagger and use the amount property to split the animation. I don't have example right now, and in my project I'm not planning using multiple staggers, but I'll definitely make a little demo in the next couple of days to test, try to fix that and share it here for help or to show how it might be done! Thank you again. 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