Jump to content
Search Community

smooth tween on repeats?

Nico D 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,

 

I'm really liking the smooth quality of the greensock javascript animation.

 

that is, everything plays nicely smooth the first time, but when the animation is set to loop, or user interaction plays a part again (goes to a timeline label), the tweens are getting "hickups" -- get interrupted for a split second -- and look jerky.

 

is there a trick or best practice to avoid this?

 

thanks!

nico

Link to comment
Share on other sites

I'm a little confused - are you saying that if, for example, you have an object that animates from 0 to 500 during the tween, and then you restart(), you don't want it to jump back to 0 and start playing from there? Are you wanting it to tween back to 0 and then start again? 

 

If that's the case, you can certainly tween the "time" of a tween, like:

 

var tween = TweenLite.to(element, 3, {left:500});
//then later...
TweenLite.to(tween, 0.5, {time:0, onComplete:function() { tween.restart(); }});

Just keep in mind that the "jerk" back to where you're telling it to go (a label or time) is completely normal and not a mistake at all. Think of it like a movie that has played all the way to the end and then you click the replay button - it would jump immediately back to the beginning rather than gradually rewinding. See what I mean? 

 

(or maybe I'm misunderstanding your question)

Link to comment
Share on other sites

Hi Jack, sorry for being confusing, I'm not a native speaker . . .

 

so no, the behaviour you're describing, like jumping to the point of time in the timeline is of course intended and works like it should

 

but in my code, when the animation plays the second time, it is flickering, and not as smooth as the first time

 

BUT I just found out what caused this . . . I used:

var tl = new TimelineMax({repeat:100});
tl.add("label");
tl.to("#gs", 0, {scale:0.2, x:0, y:0, rotation:0, autoAlpha:0});
tl.to("#gs", 0.75, {scale:1, x:0, y:0, rotation:0, autoAlpha:1, ease:Power4.easeOut, delay:-0.25});
tl.to("#fs", 0, {scale:0.2, x:0, y:0, rotation:0, autoAlpha:0});
tl.to("#fs", 0.75, {scale:1, x:0, y:0, rotation:0, autoAlpha:1, ease:Power4.easeOut, delay:-0.25});

which creates the flickering in the second round of animation 

 

but when I use this instead (simply re-ordering the lines)

var tl = new TimelineMax({repeat:100});
tl.add("label");
tl.to("#gs", 0, {scale:0.2, x:0, y:0, rotation:0, autoAlpha:0});
tl.to("#fs", 0, {scale:0.2, x:0, y:0, rotation:0, autoAlpha:0});
tl.to("#gs", 0.75, {scale:1, x:0, y:0, rotation:0, autoAlpha:1, ease:Power4.easeOut, delay:-0.25});
tl.to("#fs", 0.75, {scale:1, x:0, y:0, rotation:0, autoAlpha:1, ease:Power4.easeOut, delay:-0.25});

everything continues to play smooth!

 

So . . . thank you so much, it was while reading your response that this solution suddenly popped up in my head!

 

Nico

Link to comment
Share on other sites

Glad you got it working.

 

One problem I see is that you're using a NEGATIVE delay on a tween that's being added to the very beginning of the timeline (time:0). Timelines cannot allow things to start before...well...the beginning of the timeline, thus when that is sensed internally it'll shove everything back to line that tween up with the start. It's much better to just built it correctly from the get-go.

 

In other words, you've got 2 zero-duration tweens at the start of your timeline, so those don't use up any time whatsoever, and then you add a 0.75-second tween and tell it to delay -0.25. Without any delay, it'd start at a time of 0 (in terms of the timeline's time). So you're asking it to delay -0.25 which means backward in time. Typically delays are positive, not negative, but of course you can make them negative if you want.

 

If you want to make your code a bit more efficient too, you can use set() for the zero-duration tweens, and group things like this: 

 

var tl = new TimelineMax({repeat:100});
tl.add("label");
tl.set(["#gs", "#fs"], {scale:0.2, x:0, y:0, rotation:0, autoAlpha:0});
tl.staggerTo(["#gs", "#fs"], 0.75, {scale:1, autoAlpha:1, ease:Power4.easeOut}, 0.25); 

 

  • Like 1
Link to comment
Share on other sites

Ah, great tip, I wasn't aware of the set() method.

Awesome, that can really simplify code for many situations.

 

As for the negative delays, other tweens will be added to the beginning so that will take care of the negative delays.

 

Thank you so much -- it is very inspiring to get such high quality support!

  • 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.
×
×
  • Create New...