Jump to content
Search Community

Problems with reverse and repeat

Wodger 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

Hi,

 

Short version: 

I am trying to animate a set of electrons that move around a circuit. I use onReverseComplete to repeat when playing in reverse, but as the speed of the animation gets higher, the result is not good. Is there a better way to make the timeline repeat when using reverse?

 

Longer explanation:

My current implementation uses one timeline pr. electron with repeat: -1. All the timelines are basically the same, but the time of each one is offset, thus spacing them evenly around the circuit. The timelines are kept in an array which I loop through when i want to play, pause or adjust timeScale. This actually works great, even on mobile and even with the electrons moving insanely fast.

 

The problem is that I need to reverse the animation at times and reverse animations does not repeat... In earlier animations I have done I have used a function onReverseComplete to set the time of the timeline to the end. In this animation setup though, it breaks down when the timeScale is high enough (starting at around 9 - 10). The different timelines come out of sync and the spacing gets uneven. At high enough speeds they start to clump together and I end up with just a few visible electrons.

 

Any thoughts on how to fix it or better ways to do it?

 

At the moment my solutions are either to reduce the timeScale to where the problem is negligible (not ideal, but quick to do) or to make a different animation that goes the other way and switch between them (possible performance issues, will probably introduce some new visual problems as well).

 

 

Link to comment
Share on other sites

It'd be super useful to see a codepen, as @Shaun Gorneau suggested, but I think I know what you're referring to and I'm sure there's a solution. Remember that in any animation, things update at certain intervals which very likely don't land EXACTLY on top of your start/end times of your animations. So let's say your animation is running backwards and it's ALMOST at the start, like at 0.01 seconds in, and then the next update the parent's playhead lands at 0.02 seconds before that animation's startTime. Of course at that time it'd fire the onReverseComplete...but remember, we're 0.02 seconds off, so if you jump to the end at that time, of course it'll follow your instructions but if you're expecting it all to be synchronized with other animations that don't have that 0.02 seconds offset, it ain't gonna happen. See what I mean? 

 

This is actually one of the things that makes GSAP special - we factor all of this in when we do repeats whereas most other engines simply trigger a restart onComplete (meaning those gaps/inaccuracies creep in on ever iteration and things get out of sync). In other words, they do it the way you're doing it (manually reset the playhead in a callback) which isn't entirely accurate. 

 

Solution: 

//you can use this in your onReverseComplete to factor in any time gap...
//offset is how far the parent's playhead has moved beyond the start of the animation in reverse
var offset = tl.startTime() - tl.timeline.time();
tl.time(tl.duration() - offset);

 

There are actually a bunch of other ways you could do this too, but I don't want to overwhelm you :)

 

Does this help? If not, please provide a codepen and we'll take a peek. 

  • Like 5
Link to comment
Share on other sites

Thank you both for your answer! Sorry I am a bit late to answer back.

 

Since these things have a tendency to appear when deadline was yesterday, I opted for the quickest solution which was to limit the speed to where the problem is minimal. I also stops the animation before changing timeScale, something that seems to help keep timelines in sync.

 

I will try to make a pen soon, since I find the problem interesting for other projects as well. It would also be great to get comments on possible better solutions to animate many objects along a path.

 

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