Jump to content
Search Community

Delay onLeave function - Scrolltrigger

Pauline Brothier test
Moderator Tag

Recommended Posts

Hello!
I'm trying to improve my animation. I have a lottie animation and a colored circle which appears when the animation is over. 

Everything works fine, but to make it perfect, I would like the circle to appear a little before the end of the animation. 

I tried to add a delay to my onLeave function to overlap the lottie animation, but it's not working. 

 

If someone has a solution to help me improve my animation it would be perfect :) 

 

Thanks a lot

See the Pen XWVVVQY by PaulettePaillette (@PaulettePaillette) on CodePen

Link to comment
Share on other sites

I've created a timeline instead of just a `gsap.to()` tween and add the dot appearance to that timeline, gave it a relative position parameter of `-=0.3` which means it will appear 0.3 seconds before your lottie animation finishes.

 

See the Pen VwQZVjx?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

The default tween value of GSAP is 0.5 seconds, this doesn't really matter, because you're using scrollTrigger with `scrub: true`, but the position parameter still works like that. So the dot will be visible on 2/5 of the scrollable height, if that make sense.

  • Like 4
  • Thanks 1
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...