Jump to content
Search Community

progress slider show/hide problem

benoit test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

You've got conflicting tweens. Your first one starts at the 8-second spot and lasts 4 seconds, but you're tweening the same property ("y") of the same element to a different value starting at a time of 11.5, thus it overwrites (and kills) the first one once it kicks in. Thus when you go backwards, that original tween doesn't kick in (it was killed/overwritten). Generally it's a bad idea to create conflicting tweens like that, and GSAP automatically kills the first one assuming you don't want tweens fighting with each other. But you can just add overwrite:false to the 2nd one if you don't want it to overwrite anything (just beware that it'll leave those two conflicting/overlapping tweens in there). 

tl.to('#eau', 4, {
    y: 1400,
  }, 8)
  .to('#eau', 1, {
    y: 0, overwrite:false //<-- add this
  }, 11.5)
  .set('#eau', {
    autoAlpha: 0,
  }, 12.5)

Does that clear things up for you?

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