Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
beamish

problem with two seperate timelines of the same div

Go to solution Solved by beamish,

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 facing a problem in a complicated web application which is difficult to isolate into a pen, so I was thinking of just sharing the situation and perhaps getting some possible clues as to what to look for to understand why this problem happens:

 

I have one DIV with 2 TimelineMax timelines.  Each timeline is made of two tweens of this DIV.  In the first timeline the tween starts at autoAlpha 0 at the first tween and ends at autoAlpha 1 in the second tween, and in the second timeline the situation is the opposite: starting from autoAlpha 1 and ending at 0.  The duration of the two timelines is different: the first is 2 seconds, the second is 1.5 seconds.  Other than that there is nothing else.

 

Now I create these two timelines.  The second one runs perfectly well.  The problem is in the first: it "jumps" directly from autoAlpha 0 to 1 without any smooth chage between the two states.  If I recreate the first timeline then it works well with smooth changes (and the second one is also smooth as it was before).

 

Any suggestions as to where to look?...

 

Thanks !

 

Elior

Link to comment
Share on other sites

Use 1 timeline, and speed it up on reverse. Something like this...

// Forwards
tl.duration(2).play();

// Reverse
tl.duration(1.5).reverse();
Link to comment
Share on other sites

 

Use 1 timeline, and speed it up on reverse. Something like this...

// Forwards
tl.duration(2).play();

// Reverse
tl.duration(1.5).reverse();

 

Hi,

 

Thanks,

 

The point is that I need two separate timelines (because not always will the last tween of the first is the same as the first tween of the second)..

 

Elior

Link to comment
Share on other sites

I'm having a tough time understanding exactly what you mean here - it sounds like it should be relatively simple for you to recreate in a codepen in a few lines of code, right? Could you please do that so that we can understand the context and give you a solution? We'd love to help. 

  • Like 1
Link to comment
Share on other sites

I'm having a tough time understanding exactly what you mean here - it sounds like it should be relatively simple for you to recreate in a codepen in a few lines of code, right? Could you please do that so that we can understand the context and give you a solution? We'd love to help. 

Hi Jack,

 

*** please see the next message from me in this topic, where I managed to create a pen the shows my problem, thanks ***

 

Thank you for your kind motivation to help :-)

 

I understand it's difficult to understand the situation, it sounds simple but it isn't. what happens is that an array of data items are tranlated by javascript code into the properties of the tweens creating the timeline.  This happens for 2 arrays creating 2 timelines for the same div.  at first only the secondly created timeline is working right; however if I re-run the code for the first array it both work.  the strange thing is that the timeline of the first array IS created even when it does'nt work as expected, I can see it has children reflecting the relevant props.  This timeline has 2 tweens, the first with opacity 0 and the second with opacity 1.  when I seek and pause to time 0 then the div is properly displayed with autoAlpha 0; however when I seek and pause even to 0.01 - I see the full opacity of 1, and not a slight change above 0 as expected (the second tween's time is right, set to 2.0, and the first is 0).  Perhaps this can give you a clue as to where I should look for to find the cause of the problem?

 

Thank you so much again,

 

Elior

Link to comment
Share on other sites

I'm having a tough time understanding exactly what you mean here - it sounds like it should be relatively simple for you to recreate in a codepen in a few lines of code, right? Could you please do that so that we can understand the context and give you a solution? We'd love to help. 

 

OK, I gave it a try and here is a link to the pen code which seems to show the problem: 

See the Pen rWMzJy by beamish (@beamish) on CodePen

 

there are 2 timelines for the same div; in the end of the JS code I first seek the 0 time of the second timeline where the autoAlpha is 1 - but immediately after that I seek the 0 time of the first timeline where autoAlpha is 0 and try to play it ... why then do I see the div with full opacity right at start, and why can't I play the first timeline?

 

Notice that if I comment out 'tl2' then 'tl' plays well; if I comment out just the 'seek' call to 'tl2', so 'tl2' is only created but never used - the same problem remains.  If I change 'autoRemoveChildren' to 'true' then it works, but I don't want this because I need to rerun the timeline again and I don't want to recreate it each time I need to run it...

 

Thanks !!!

Link to comment
Share on other sites

Thanks for the demo.

I'm having trouble understanding what the problem is.

 

I removed add()s from the code as it wasn't necessary

I removed autoRemoveChildren

I toggled the commenting of tl2.seek(0).pause();

 

The animation always played the same. The blue box faded in from autoAlpha:0 to autoAlpha:1 as it was told in the first timeline.

 

If you saw a flash of the blue box being visible BEFORE the fade in happened that is just because the DOM got rendered before your JavaScript had a chance to load and execute. This is totally normal. You can prevent the blue box from displaying during the initial page render by setting visibility:hidden in the css.

 

 

Here is my modified JS

var tl = new TimelineMax({ paused: true});


tl.to('#blueBox',0, {autoAlpha:0});
tl.to('#blueBox',1, {autoAlpha:1}, 1);


var tl2 = new TimelineMax({ paused: true});
tl2.to('#blueBox',0, {autoAlpha:1});
tl2.to('#blueBox',1, {autoAlpha:0}, 1);


tl2.seek(0).pause();


tl.seek(0).play();tl.seek(0).play();

http://codepen.io/GreenSock/pen/MbjGEy?editors=0110

 

Is there something still wrong or unexpected? Again, I may not be understanding the problem fully.

Link to comment
Share on other sites

  • Solution

Hi Carl,

 

Once I remove the 'add()'s the problem is resolved, so it seems that these 'add()'s were causing it... I don't know why there's a difference with or without these 'add()'s, but it doesn't really matter as long as there's a solution :-)

 

Thank you !!!

 

Elior

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