ScrollTrigger: Animate on threshold

[coderesolution 2 Likes (Newbie)]

Hey there,

 

This is not really an issue but rather a way of improving and writing more efficiently.

 

I am trying to find the best way to animate a fixed header after scrolling passed a specific threshold (i.e. 100px from the top).

 

I'm currently achieving this by toggling a class, which works fine, although I'd prefer to leverage GSAP to animate it than CSS. You can also see that this is coupled with an animation that plays/reverses depending on the scroll direction.

 

Effectively I am aiming for:

1. Scroll down (hide)
2. Scroll up (show)
3. Scroll past 100px from top, apply styling such as `background`, `backdropFilter` and `borderColor`.

 

function fnHeader( oComp ) {
	
	let oHeader 							= document.querySelector( '.c-header' );
	let oHeaderInline 						= oHeader.querySelector( '.c_inline' );
	
	/**
	* Toggle class on threshold
	*/
	gsap.from( document, {
		scrollTrigger: {
			start: 'top -100',
			end: 99999,
			toggleClass: { className: 'has-scrolled', targets: oHeader }
		}
	});
	
	
	/**
	* Animate on up/down scroll direction
	*/
	const showInline = gsap.from( oHeaderInline, { 
		yPercent: -100,
		paused: true,
		delay: .1,
		duration: .8,
		ease: Quart.easeInOut
	}).progress( 1 );
	
	ScrollTrigger.create({
		start: 'top -80%',
		end: 99999,
		onUpdate: ( self ) => {
			self.direction === -1 ? showInline.play() : showInline.reverse()
		}
	});


}

 

Would anyone advise on a better approach?

 

Thank you!

[OSUblake 18,474 Likes (Superhero)]

Hi code,

 

There are some super simple demos here...