Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
romain.gr

ScrollTrigger, stagger anim + other animation issue

Recommended Posts

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

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');

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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

I just explained what was happening and posted the solution above.

  • Like 1
Link to comment
Share on other sites

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.

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

@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

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

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

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.
×