Jump to content
GreenSock

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

Timeline Reverse

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

First time posting, long time reader! Thank you so much for everything you have accomplished here your help over the years has been priceless!

 

SO....

 

i have a path and i have objects that animate along that path. Sometimes the objects come in from the right and leave to the left other times they come into from the left and leave from the right or right right or left left.

 

I have two basic timelines that come in from either direction.  So if timeline1 moves the objects into position from the right. timeline2 would move the same objects in from the the left. And I am attempting to just reverse them if needed.

 

The problem i am facing is that if a timeline has not been played it will no reverse. So if timeline1 moves objects into place from one direction, timeline2 in reverse would move those objects in the other direction. So i tried changing its currentProgress to be equal to 1 so that it will know hey i'm at the end so i can reverse. But it still comes out undefined. 

 

Now if i run all my timelines at least once then it works with no problem but i find that there is an issue at first. Please let me know if this made sense. I could try diagrams next maybe.

 

Thanks!!!!!!!!

Link to comment
Share on other sites

Hi and welcome to the Greensock forums.

 

In this cases you can use reverse(0). That basically takes the timeline from it's final position to it's beginning, like this:

var div1 = $("#div1"),
    tl = new TimelineLite();

tl.from(div1, 2, {left:600});

//reverse timeline from it's end position
tl.reverse(0);

If this is not what you need, please post a reduced sample of the issue in codepen or jsfiddle to get a better look.

 

Rodrigo.

Link to comment
Share on other sites

Rodrigo thanks a lot for the quick reply. using reverse(0) definately started the animation which is great but... (there is always a but)... at the end of the animation instead of it finishing where it should it is doing the reverse animation and then it ends up going to its original spot.

 

Its rather complex and i failed a bit at just making a smaller version of it to test but i was hoping if you look at the test site this might help

 

 

If you start the piece by clicking on the 9th grade first and going through all the animations it seems to work fine. But if you start with thru college and work your way left through the buttons you'll see my general issue.

 

Thanks again for taking the time to look at this problem i am having i really appreciate it!

 

Dennis

Link to comment
Share on other sites

Hi and welcome!

 

In order to effectively investigate what is going on you are going to need to provide a reduced test case that we can test and edit. The best option is to use http://www.codepen.io so that multiple people can easily edit your example and offer solutions. Or you could upload a zip that contains all your html / css / javascript and images. 

 

The key here is a "reduced" test case. Looking at your code it is quite difficult to track down how multiple timelines are dynamically being made to effect dynamically generated html assets with dynamically generated bezier curves and so on. Not to say there is anything wrong with your code, it just makes finding the key issue VERY difficult.

 

To me it seems like the problem relates to having 2 timelines that control each sequence (forwards / reverse) So both these timelines are probably fighting for control and you are getting "unexpected" results. Perhaps tweens in timelineUp are overwriting tweens in timelineDown. It sounds like you want one timeline to render at the end while another is being told to render at the beginning (or something like that)

 

I think if you provided a simple codepen that animated 4 or five colored divs in a straight line that used your TimelinesUP/Down technique we'd be able to spot the issue fairly easily.

 

Also, before you create the reduced test case, I'd suggest you just generate the timelines when you need them and not try to build them all at once like you are here:

 

createTimelinesUP(0,stepPos4);
createTimelinesUP(1,stepPos7);
createTimelinesUP(2,stepPos4);
createTimelinesUP(3,stepPos7);
createTimelinesUP(4,stepPos8);


// DOWN
createTimelinesDOWN(0,stepPos4);
createTimelinesDOWN(1,stepPos7);
createTimelinesDOWN(2,stepPos4);
createTimelinesDOWN(3,stepPos7);
createTimelinesDOWN(4,stepPos8);

it might seem more efficient to have them "pre-packaged" but there is very little overhead involved in building a timeline that animates a dozen or so objects.

 

EDIT: To get started on codepen, just fork this example: http://codepen.io/GreenSock/pen/dgmia (GSAP is already loaded)

Link to comment
Share on other sites

Hey Carl thanks for taking the time in reading and answering my questions.

 

I have a couple of questions. You are saying that producing tweens and timelines on the fly will not bog down the piece? I've done mostly AS programming and we always worry about memory leaks and reducing how many objects you create. Is there a destroy function to remove the timelines after they have completed?

 

I like the idea of creating the timelines on the fly when i need them but i'm worried about memory usage.

Link to comment
Share on other sites

Hi Dennis,

 

Like Carl said is always better to get a simple working demo. Since your code is quite complex is kind of hard to follow so I tried to recreate what you're after but without success (I haven't invested a lot of time into it to be honest).

 

In terms of memory usage you don't have to worry since GSAP has a top notch garbage collection, just like in AS, so there are no worries about the instances eating too much resources.

 

In order to remove or destroy timelines you can use the kill() method:

http://api.greensock.com/js/com/greensock/core/Animation.html#kill()

 

Rodrigo.

  • Like 3
Link to comment
Share on other sites

Hey i wanted to thank you all for helping me with my issue. It turns out that i create the timelines on the fly when i need them and it seems to be working out really well so far!

 

This community is outstanding and its an absolute pleasure to be apart of it!!!

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

×