Scrubbed scroll animation - animate initially

[tin_soldier]

Hi, how would you go about making the top h2 element animate in initially?

Since the animation is triggered by entering the viewport and scrubs, the first h2 doesn't animate in. Thanks.

See the Pen oNRjLLd by 1976ltd (@1976ltd) on CodePen

[thehaes]

Not sure what you're trying to achieve, do you want to animate it in when the page loads? Or you want it to scrub like all others? I would probably put some conditional to check if it's the first h2 then modify the start & end values, something like this:

let animateElementsCT = document.querySelectorAll('[animate="come-together"]');

animateElementsCT.forEach((animateElement, index) => {
	let isFirst = index === 0;
      
	let typeSplit = new SplitType(animateElement, {
		types: 'lines',
		tagName: 'span'
	})
        
	let lines = animateElement.querySelectorAll('.line');
        
	lines.forEach((line, index) => {
		let config = {
			trigger: line,
			start: isFirst ? 'top top' : 'top bottom',
			end: isFirst ? 'center top' : 'center center',
			scrub: true
		}
		gsap.from(line, {
			x: index % 2 === 0 ? '-100%' : '100%',
			opacity: 0,
			duration: 1,
			ease: 'sine.out',
			stagger: 0.1,
			scrollTrigger: config
		});
	});
});

But again, I'm not sure what you're trying to do and with your current setup it kind of doesn't make sense animation-wise. I think you should make an empty div at start with 50vh height (or even 100), so the scrollTrigger actually have space to animate it. Other idea is to just animate the first paragraph/lines with normal tween and not scrollTrigger

 

[Cassie]

Hey!

 

You can clamp your triggers to ensure that the trigger points fall between the min and max scroll positions.

See the Pen NWVGgvP?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

[tin_soldier]

15 hours ago, thehaes said:

Not sure what you're trying to achieve, do you want to animate it in when the page loads? Or you want it to scrub like all others? I would probably put some conditional to check if it's the first h2 then modify the start & end values, something like this:

let animateElementsCT = document.querySelectorAll('[animate="come-together"]');

animateElementsCT.forEach((animateElement, index) => {
	let isFirst = index === 0;
      
	let typeSplit = new SplitType(animateElement, {
		types: 'lines',
		tagName: 'span'
	})
        
	let lines = animateElement.querySelectorAll('.line');
        
	lines.forEach((line, index) => {
		let config = {
			trigger: line,
			start: isFirst ? 'top top' : 'top bottom',
			end: isFirst ? 'center top' : 'center center',
			scrub: true
		}
		gsap.from(line, {
			x: index % 2 === 0 ? '-100%' : '100%',
			opacity: 0,
			duration: 1,
			ease: 'sine.out',
			stagger: 0.1,
			scrollTrigger: config
		});
	});
});

But again, I'm not sure what you're trying to do and with your current setup it kind of doesn't make sense animation-wise. I think you should make an empty div at start with 50vh height (or even 100), so the scrollTrigger actually have space to animate it. Other idea is to just animate the first paragraph/lines with normal tween and not scrollTrigger

 

Thanks @thehaes. This is a nice idea but I need this to work for multiple pages where sometimes the first h2 will be in the viewport on page load and sometimes it will be further down the page. Basically I want to have my cake and eat it, ie; each h2 should scrub animate on scroll but if it's already in the viewport it should animate automatically into place.

[tin_soldier]

10 hours ago, Cassie said:

Hey!

 

You can clamp your triggers to ensure that the trigger points fall between the min and max scroll positions.
 

 

 

 

Thanks @Cassie. That seems to work really well in your video with the rotating boxes but in the Codepen when clamp is added the first h2 doesn't animate in. Is this something to do with it being a 'from' rather than 'to' tween?

[tin_soldier]

I've come up with a solution but it's probably not very elegant or DRY.

See the Pen qBGOygM by 1976ltd (@1976ltd) on CodePen

[Cassie]

Ah no, sorry, that's just down to your trigger positions. I think your clamped end position was occurring before the start position, or at the same time as? Something like that.

If you change them to be relative to the start position it works correctly

See the Pen NWVGgvP by GreenSock (@GreenSock) on CodePen