Jump to content
Search Community

Am I using TimelineMax correctly?

MT test
Moderator Tag

Go to solution Solved by Carl,

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 Diaco,


Your solution doesn't change anything. Different way to write the code. But added it ( blue boxes )

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


Now observe:


1) Hover on the green boxes up and down and observe the animation speed and how all feel like a wave.


2) Hover on red or blue boxes up and down and observe the animation speed. It seems twice as fast and the wave effect isn't present as on the green boxes



I clearly see a difference in how the animations look and feel and I am wondering why? Why doesn't TimelineMax play it the same as in normal usage of TweenMax.


Thank you!

Link to comment
Share on other sites

ok , the difference come from your hover Out function , in your TweenMax version always you have a backward tween with constant duration .

with timelines you can do something like this :


$(".box3").each(function(index, element){
  var tl = new TimelineLite({paused:true})
  // add your timeline tweens here
  element.animation = tl;

$(".box3").hover(over, out);
function over(){
function out(){ 

See the Pen ZbaZPo by MAW (@MAW) on CodePen

  • Like 2
Link to comment
Share on other sites

Hi DIaco,


Clearly this is not a good answer: so basically we are doing TweenLite > TimelineMax > TweenMax ????


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


If you quickly hover the blue boxes you will see it works until the point that it doesn't and you have to go outside the boxes wait for half a second and then it will work.


If you hover slowly on each blue box it works, if you hover fast it breaks.


Clearly the solution is not good, the question is why TimelineMax distort the tween when it should only interfere with the playing forward and playing backward( reverse)


I don't think nesting 3 levels is a solution: TweenLite > TimelineMax > TweenMax


Could I get a technical answer on why the TimelineMax breaks the tween on the red boxes ? or has a bigger speed or easing or something else ? :)


Thank you!

Link to comment
Share on other sites

Still there is a slight speed on reverse. So from what i understand in using TimelineMax is that on reverse it applies the same Quad.easeOut this results in the difference.


Basically to achieve the same effect as when using single TweenMax, I would have to tell TimelineMax to reverse the easing Quad.easeOut on reverse?


Correct? If yes, your solution is an answer but still i can see a difference, even though not many people will see it I can say :D it does scratch my eyes.


PS: I am trying to prepare a codepen to illustrate the difference

Link to comment
Share on other sites

As Diaco stated previously, your TweenMax approach creates new tweens with the same duration all the time.

This is very different than playing and reversing a single timeline.


With your tween approach, if you rollover very quickly you might get the box width to tween from 50 to 150px in 0.1 seconds BUT as soon as you rollout a new tween animates back to 50 with a duration of 0.4 seconds. That is why you see more of the wave effect, your rollout animations take much longer than your rollover animations (when roll over / out very quickly). In addition to the durations being different, the eases are also being applied new to easeOut of each animation in each direction.


With the timeline approach if you rollover for 0.1 seconds and tween the width to 200px, when you rollout it will take exactly 0.1 seconds to tween back to 50px.


You will note that Diaco's solution (which I didn't have any trouble with in his pen) employed fixing the duration to 0.5 in both directions by tweening the progress() of the timeline (very clever). You could go one step further to make the tween in the timeline have a Linear ease, and then apply easeOut eases to the progress tweens like:


$(".box3").hover(over, out);
function over(){
  TweenLite.to(this.animation, 0.5, {progress:1, ease:Quad.easeOut});
function out(){ 
   TweenLite.to(this.animation, 0.5, {progress:0, ease:Quad.easeOut});



In conclusion, the using the same TimelineMax (play/reverse) will give you different results than creating new TweenMax tweens. 

Its all about using the right tool for the job. If you are only doing a single tween, the TweenMax approach will be fine, but once you start adding multiple animations to each effect, it will be come cumbersome.

  • Like 1
Link to comment
Share on other sites

Here is a codepen to illustrate the speed issue:

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


Press the Hover in button and after that press the 'hover out' button. See that the blue boxes is finishing last.


On 'hover in' they seem to finish at the same time.


So I still don't have the same effect as when using TweenMax.


Why am I asking this? Well Imagine that on hover I have a few animations( 4 ) and I am using TweenMax. The reason for using TimelineMax is that on hover out I would not like to write those 4 animations in reverse order and also everytime i change the 'hover in' i have to change the 'hover out'.


Using TimelineMax should have simplified the changes and also less lines of code.


Thank you

Link to comment
Share on other sites

Hi Carl,


Well your solution actually is worse on both hover in/out but, and I say but, both finish at the same time:


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


:D I really want to use TimelineMax but I am not going to give up on the fluidity that I already have, could you ask Jack to take a look?( or Jack if are reading this could you give a feedback? )


Thank you!

Link to comment
Share on other sites

So basically I reversed the ease on the timeline?


Linear just multiplies by 1 and leaves each ease on out/in to do the job.


Anyway this seems to be right and my eyes can't tell the difference. The code does.


Thank you Carl and Diaco!

PS: Also Thank you Jack! You guys are doing an awesom work :)

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