Jump to content
GreenSock

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

progress slider show/hide problem

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

Hi,

 

I extract a part of an animation in the Codepen.

If you read the animation (drag to the right) it's OK, but when you drag to the left, the element is visible.
Why ? Is it a bug or a feature ?

See the Pen pgmJeL by anon (@anon) on CodePen

Link to comment
Share on other sites

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)
  .pause();

Does that clear things up for you?

  • Like 4
Link to comment
Share on other sites

Nice explanation of using overwrite:false on a tween Jack :)

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