Jump to content


ScrollTrigger: Animate on threshold

Recommended Posts

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 );
		start: 'top -80%',
		end: 99999,
		onUpdate: ( self ) => {
			self.direction === -1 ? showInline.play() : showInline.reverse()



Would anyone advise on a better approach?


Thank you!

Link to comment
Share on other sites

Hi code,


There are some super simple demos here...



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.