multivac

How to "trim" a timeline ?

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"

 

 

 

Share this post


Link to post
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.

 

 

  • Like 2

Share this post


Link to post
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.

 

 

Share this post


Link to post
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?

 

 

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

Share this post


Link to post
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.

 

 

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

Share this post


Link to post
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"});

 

 

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

 

Docs for TimelineMax.tweenTo()

  • Like 5
  • Thanks 1

Share this post


Link to post
Share on other sites

@Carl 

Tweening a Timeline ... wow.

This is great !

Thank you so much.

  • Like 1

Share this post


Link to post
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.