Jump to content
Search Community

Reversed timeline issue

Rodrigo test
Moderator Tag

Recommended Posts

While working on  the sample of this thread:

I stumbled upon an unexpected behaviour and I wanted to check if it's part of the update or an actual issue.

 

Normally when I toggle a GSAP instance I created paused and then I add the reverse() call at the end in order to use this pattern: tl.reversed(!tl.reversed());

 

If you check the codepen sample you'll see that there is a waiting time until the animation actually starts, if you run the codepen sample again and click as fast as possible the button, that amount of time between the click handler and the animation starting is smaller, but it's still there. After the first set of toggles (forward and then backward) the behaviour is normal, no waiting. If you run the codepen and wait, say 3 seconds, the animation starts 3 seconds after the event handler. You'll find a series of console calls with the time in ms that measures the time elapsed between the initial render and the event handler, and between the event handler call and the tween start.

 

This happens only with version 3.2.5, if you change the version to 3.2.4 it works as expected.

 

Normally I'd be thrilled that Jack was able to create the concept of negative time, but it is indeed odd that apparently the instance is not sitting at zero seconds.

See the Pen BaNOjWL by rhernando (@rhernando) on CodePen

  • Like 2
Link to comment
Share on other sites

Great catch, @Rodrigo! Sorry about that. It was indeed a regression in 3.2.5 and I've fixed it in the upcoming release which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js

 

Here's a super reduced test case that'll fail only in 3.2.5 (and I've added it to my suite of tests for the future):

function reverseResumeTest() {
  let obj = {x:0},
      t = gsap.to(obj, {x:1000}).reverse();
  gsap.delayedCall(0.3, function() {
    t.reversed(!t.reversed());
    gsap.delayedCall(0.2, function() {
      if (!obj.x) {
        onFail("reverseResumeTest() failed");
      } else {
        fromTest();
      }
    })
  });
}
reverseResumeTest();

 

Better? Is there any other odd behavior you noticed? If not, I'll likely push this update out pretty quickly. 

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