Jump to content
GreenSock

mr.x

Best way to animate an image using multiple Timelines?

Recommended Posts

If you want to animate something with several different timelines, what is the best way to go about it?

 

For instance, let's say we have a car and 4 different Timelines that move it around, as in the pen attached (simplified for clarity).

 

Everything is fine if you move slowly, but if you start mashing the keys you'll see the car jump around. Also if you press 2x or 3x in the same direction the tween will pause to start over from that position. 

 

I guess the issue is with overwrite? The best I could figure out is to invalidate() the timelines and use overwrite:0 (overwrite:3 works pretty well too), but it's not quite enough.

 

Any ideas or tips? Thanks in advance. 

 

 

See the Pen prGazv by xgraves (@xgraves) on CodePen

Link to comment
Share on other sites

Hi @mr.x :)

 

Sounds like you may be thinking about additive animations. I think you'll like this thread:

@OSUblake has a cool demo here:

See the Pen PPmJpL by osublake (@osublake) on CodePen

 

Others may come along with more advice and ideas.

 

Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

Hi @mr.x

 

What are you working on? There's a lot of stuff additive animations could be used for, but if you want to move a car around, I would probably use something like requestAnimationFrame or GSAP's ticker to update it on every frame. That's more physics based.

 

And if you're going to use keys, it's better to check if a key is pressed rather than reacting to a key event as they will constantly fire.

 

 

  • Like 3
Link to comment
Share on other sites

Thanks @OSUblake! Actually my project is not as interactive or physics-like as the car demo, I just got carried away with the pen, lol :)

 

I'll make a new pen that's closer to what I'm working on. The same question about competing timelines will apply though. Maybe I need a second course in the Overwrite process; I understand the basics, but not how it functions in a complicated scenario. 

Link to comment
Share on other sites

On 9/2/2017 at 7:54 PM, mr.x said:

Thanks @OSUblake! Actually my project is not as interactive or physics-like as the car demo, I just got carried away with the pen, lol :)

 

I'll make a new pen that's closer to what I'm working on. The same question about competing timelines will apply though. Maybe I need a second course in the Overwrite process; I understand the basics, but not how it functions in a complicated scenario. 

 

Nothing wrong with getting carried away. I found the behavior of your car to be quite entertaining. :D

 

It would help to see something closer to what you're working on, but it sounds like you have a pretty good understanding of the process. For a complicated scenario, I really don't think there is a good answer. It's not only the overwrite you have to deal with, but making sure the duration and easing are consistent if an animation gets interrupted. 

 

Did you look at that additive animation stuff? It solves all those issues by not overwriting anything, rather it creates and runs multiple tweens on the same property, and combines them into a single value. 

 

  • Like 1
Link to comment
Share on other sites

Thanks! It's pretty fun to zip around, lol.

 

Yes the additive solution looks good, but it means a fairly big code re-write which I don't think is feasible for this project unfortunately.

 

I'm building another reduced-case test pen, I'll post it as soon as I can. 

 

Thanks again for your help. 

Link to comment
Share on other sites

Hey @OSUblake

 

I read through more of that Additive animation thread, and it's very cool! When I get some time I'm going to study it further.

 

While creating a new sample pen, I managed to solve my problem, at least in this reduced test case. Here it is for anyone else looking for a solution:

See the Pen dzERzq by xgraves (@xgraves) on CodePen

 

The best way I could figure out to animate an object with multiple timelines is by using a combination of overwrite:3 and timeline.invalidate();  In this pen you can play around with the defaultOverwrite and the invalidate lines to see the wonky effects they have.

 

So this all worked great unless you tried to restart while it was playing (i.e., click anywhere on the screen), then havoc ensued and it couldn't get back to the reset position. After careful examination, I figured out the other animations were still running, so I added pause() and kill() to them before playing reset, and it seems to work perfectly now! 

 

The entire method might be a bit hacky (a master timeline calling functions to play paused timelines), so if there's a better way to approach this please chime in. I tried "smoothChildTiming" and "immediateRender" but couldn't figure out how they'd help.

 

 

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