Jump to content
Search Community

"Removing" a timeline from another timeline causes gap in time

TartufoDAlba 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

My goal is trying to fully remove t3 timeline from master timeline.

 

"master.remove(t3)" seems to be removing it from the master timeline, minus a time gap.

 

It causes a small gap between t2 and t4 playing, where i would like to find a way to eliminate that time gap by fully removing t3.

 

 

See the Pen RgbMLe by tartufodalba (@tartufodalba) on CodePen

Link to comment
Share on other sites

6 minutes ago, PointC said:

Hi @TartufoDAlba :)

 

It sounds like you're looking for the shiftChildren() method. That will allow you to close the gap from the animation that was removed.

 

https://greensock.com/docs/#/HTML5/Animation/TimelineMax/shiftChildren/

 

Here's a thread with almost the exact same question. 

 

Hopefully that helps. Happy tweening.

:)

 

You're right on the money! :) Thank you.

 

Here is working update in cause anyone stumbles onto this:

See the Pen QgLmPE by tartufodalba (@tartufodalba) on CodePen

 

  • Like 5
Link to comment
Share on other sites

I'm now getting some behavior that is making me question if I fully grasp the "shiftChildren()" method.

 

If now I take the "fixed" pen (2nd in this thread), make it so each timeline (t1, t2, t3, t4) has the exact same total time (of 1 second each) it creates a different output.

 

I now receive unexpected behavior where 2 timelines play at the beginning (at the same time) + seems to skip over the "t3 shift Children()":

 

See the Pen PjowaN by tartufodalba (@tartufodalba) on CodePen

 

Link to comment
Share on other sites

That's because of the 3rd parameter in the shiftChildren() method -- ignoreBeforeTime. From the docs:

 

ignoreBeforeTime : Number

(default = 0) — All children that begin at or after the startAtTime will be affected by the shift (the default is 0, causing all children to be affected). This provides an easy way to splice children into a certain spot on the timeline, pushing only the children after that point back to make room.

 

As you have it right now, that parameter is set to the duration of t3 which is 1 second. That is telling the tweens that start at or after 1 second to shift. That means t2 moves by 1 second and starts at the same time as t1 which is why you see two timelines play at once. What you want in this case is the tweens that start after two seconds to shift. If you switch your code to reflect that change, it should work as expected.

 

master.shiftChildren(-t3.duration(), false, 2);

 

Hopefully that makes sense and helps a bit.

 

Happy tweening.

:)

 

 

  • Like 2
Link to comment
Share on other sites

3 minutes ago, PointC said:

That's because of the 3rd parameter in the shiftChildren() method -- ignoreBeforeTime. From the docs:

 

ignoreBeforeTime : Number

(default = 0) — All children that begin at or after the startAtTime will be affected by the shift (the default is 0, causing all children to be affected). This provides an easy way to splice children into a certain spot on the timeline, pushing only the children after that point back to make room.

 

As you have it right now, that parameter is set to the duration of t3 which is 1 second. That is telling the tweens that start at or after 1 second to shift. That means t2 moves by 1 second and starts at the same time as t1 which is why you see two timelines play at once. What you want in this case is the tweens that start after two seconds to shift. If you switch your code to reflect that change, it should work as expected.

 


master.shiftChildren(-t3.duration(), false, 2);

 

Hopefully that makes sense and helps a bit.

 

Happy tweening.

:)

 

 

 

Great thought out explanation, thank you again! This forum really helps to make the learning curve smoother and your help is appreciated.

 

Here is the updated pen for this thread that works with your applied suggestion:

 

See the Pen MoWwez by tartufodalba (@tartufodalba) on CodePen

 

  • Like 1
Link to comment
Share on other sites

What would happen if you per-say wanted to remove multiple timelines from a master timeline?

 

I can see based on the explanation, why if you "remove 1st" + "remove 2nd", it would keep push "5" and "6" to play at the same time.

 

Would there be a way to build it where both are true:

1. Option of removing multiple parts from the master timeline and have it shift correctly (Remove 1st + Remove 2nd + Play)

2. Option removing only 1 part of the timeline (Remove 1st + Play) < which technically works on its own.

 

Where because different users may choose a different "path" 1 or 2, both options would be available to the same timeline.

 

 

See the Pen eRYNya by tartufodalba (@tartufodalba) on CodePen

 

Link to comment
Share on other sites

I've never had the need to pull out multiple nested timelines from a master, but that seems like a situation where things could get confusing very quickly.

 

If your users will be making choices that impact the number of nested timelines in a master, I'd probably create all the nested timelines in functions and return them to a new master. That way if the user picks options 1, 3, 4,7, and 9 (for example), you can create a new master on the fly from those functions that create the individual nested timelines.  That would seem easier to me than trying to create a master and removing a bunch of the nested timelines.

 

That's just my two cents worth though. Others may have additional advice.

 

Happy tweening.

:)

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