Jump to content
Search Community

How to "trim" a timeline ?

multivac 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

I have an animated background, which is infinitely looping. And an animated text foreground which has a finite time. Both are combined in a main timeline like this:

 

var tl = new TimelineMax();
tl.add( backgroundTimeline, 0 );
tl.add( foregroundTimeline, 0 );

 

The main timeline total duration will be infinite, because of the infinite looping background. How would you "trim" the main timeline to make sure its duration equals the foreground duration. Without affecting time scale.

 

Due to the nature of the project I cannot use callbacks to do something like "on foreground end" -> "stop background"

 

 

 

Link to comment
Share on other sites

That is really weird requirement, I doubt there will be anything built in for situation like this because callbacks are made for it. You can also retrieve '.totalDuration()' of foregroudTimeline and use a delayedCall to stop repeating timeline.

 

var tl = new TimelineMax();
tl.add( backgroundTimeline, 0 );
tl.add( foregroundTimeline, 0 );

TweenMax.delayedCall(foregroundTimeline.totalTime(), function(){
	backgroundTimeline.pause();
});

 

If you still don't want to use callbacks then you can do something like this, instead of "trimming" you can change the number of repeats on repeating timeline like this. Though after writing demo and this answer I feel like it is totally unnecessary which makes me curious what could be reason to not use callbacks.

 

See the Pen LeyQRx?editors=0011 by Sahil89 (@Sahil89) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Thank you Sahil.

 

I need the GSAP DevTools timeline slider to work seamlessly, in all directions.

 

Here are the main problems:

- Not trimming the timeline will display infinite time.

- If I use callbacks, when reaching the end, the background will stop forever, and the timeline slider will not make it play anymore. So I will have to code another callback to make it start again.

 

A simple trim looked liked a more simple solution, than coding a group of callbacks.

 

 

Link to comment
Share on other sites

Hi @multivac :)

 

If I understand your question correctly, you just want this repeating background animation and foreground animation to loop seamlessly using DevTools? If that's the case, I'd recommend making your repeating background animation a regular tween rather than an infinitely repeating timeline. You can then create the other foreground animation as a tween or timeline. So maybe something like this?

 

See the Pen Vybxda by PointC (@PointC) on CodePen

 

I'm not 100% sure I understand your question/desired outcome so that may not be the exact solution you need, but hopefully it provides you with some ideas.

 

Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

Hello @multivac and welcome to the GreenSock Forum!

 

Just to add my two cents..

 

if you were to use a timeline to repeat a background, then you should do it the GSAP way. This is done by creating a master timeline and adding child timelines via functions being returned with the add() method.

 

See the Pen YyMKMz by jonathan (@jonathan) on CodePen

 

And here is a helpful video by the Mighty @Carl explaining this technique in a video tut...

 

Revolutionize your animation workflow: Part 1:

 

 

Revolutionize your animation workflow: Part 2:

 

 

Happy Tweening! :)

  • Like 3
Link to comment
Share on other sites

the way I understand it you need a repeating animation to happen for the entire duration of another animation and all animations need to be in the same timeline. I would suggest instead of putting the repeating animation in the timeline, just use tweenTo() to create a tween from the repeating animations start time to the end time of the other animations.

 

Using PointC's great demo...

var rain = new TimelineMax()
rain.set("#stage", {xPercent:-50, yPercent:-50});
rain.set(".rain2", {y:-500});
rain.to(".rain1 , .rain2", 1.5, {y:"+=500", repeat:-1, ease:Linear.easeNone});

var box = new TimelineMax();
box.to("#box", 3, {x:600, ease:Linear.easeNone});

var main = new TimelineLite({id:"main"});
main.add(box);
main.add(rain.tweenTo(box.duration()), 0)

GSDevTools.create({animation:"main"});

 

See the Pen zpzmWv?editors=0010 by GreenSock (@GreenSock) on CodePen

 

DevTools now has a finite time and it controls one timeline which includes all the animations.

 

Docs for TimelineMax.tweenTo()

  • Like 5
  • Thanks 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...