Jump to content
Search Community

How to Run Property Slightly at the end ScrollTrigger

sadeghbarati test
Moderator Tag

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

Link to comment
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 e19d77ba54aff075d52b90b3154a2674 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 d22c2042ba87031c7db60146bc8b8a50 by akapowl (@akapowl) on CodePen

 

 

 

Does this help?

Cheers,

Paul

 

  • Like 7
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.
×
×
  • Create New...