Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sadeghbarati007

How to Run Property Slightly at the end ScrollTrigger

Recommended Posts

Take a look at this example

Progress bar indicator while scrolling

at end of scrolling progress bar hides

I want to use ScrollTrigger width on scroll and hide it slightly at the end ?

how to set delay on property in ScrollTrigger ?

or we have to use two scrollTrigger one for width one for hide ?

See the Pen NWNjdmw by riccardo051 (@riccardo051) on CodePen

Share this post


Link to post
Share on other sites

 

Hey @sadeghbarati007

 

You can most certainly achieve this by adding a second ScrollTrigger to that setup and calculate its start to be slightly before the end of scrolling.

 

This way, you'd have to invalidateOnRefresh though, and use function-based values for the start, to make it work properly after resizes, too:

 

See the Pen LYNyLpX by akapowl (@akapowl) on CodePen

 

 

 

Or you apply the ScrollTrigger to a timeline instead and set the duration and start-point of the opacity-tween within that timeline to something like this

.to('progress', { duration: 0.05, opacity: 0, ease: 'none'}, 0.95)

 

 

as you can see here:

 

See the Pen JjXNJLz by akapowl (@akapowl) on CodePen

 

 

 

Does this help?

Cheers,

Paul

 

  • Like 7

Share this post


Link to post
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.

×