Play nested timeline a second time in master

[Dan Burns]

Hello - I'm new to GSAP  - thanks for creating a great tool.

 

I'm attempting to play a nested timeline (TimeLineOne) a second time with different parameters than the first time it is run. Timeline runs at same duration in both instances. Any guidance would be greatly appreciated.

 

TweenMax.set(".AnimBox", {opacity:.5});

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

TimeLineOne
    .to(".AnimBox", 1, {y: -100, opacity:1, rotation: 45});

var TimeLineMaster = new TimelineMax({repeat: -1, yoyo: true});

TimeLineMaster
    .add(TimeLineOne.play().duration(8), 0) // Play TimeLineOne animation - length 8 seconds
    .remove(cachedTweens)
    .add(TimeLineOne.reverse().duration(.5), 2)
    .remove(cachedTweens); // At 2 seconds of MasterTimline Play TimeLineOne animation in reverse - length .5 seconds

 

[Shaun Gorneau]

Hi @Dan Burns and welcome to GSAP!

 

It would be best to get this into a CodePen with minimal complexity and clear notes as to what you would like to achieve (not necessarily how you would like to achieve it). The code above leaves a lot to the imagination. Here is a pen for you to get started,

 

See the Pen wRjVdN by sgorneau (@sgorneau) on CodePen

 

[Carl]

yeah, as Shaun mentioned a demo really helps.

It sounds like you could use tweenTo(): https://greensock.com/docs/TimelineMax/tweenTo() which allow you to scrub the playhead of a timeline to any time you want (forwards or backwards at whatever duration you want)

var TimelineOne = new TimelineMax({paused: true});
TimelineOne.fromTo(".AnimBox", 4, {y: 0, opacity:.5, rotation: 0}, {y: -100, opacity:1, rotation: 45});

var TimelineMaster = new TimelineMax({});

//tween TimelineOne forward to it end time of 4 seconds at normal speed (4 seconds)
TimelineMaster.add(TimelineOne.tweenTo(TimelineOne.duration()))

.to("body", 1, {backgroundColor:"black"})

//tween TimelineOne back to a time of 0 with a duration of only 1 second
.add(TimelineOne.tweenTo(0).duration(1))

 

 

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

 

[Dan Burns]

Thank you both @Carl and @Shaun Gorneau.

 

After reading though documentation I had tried using "tweenTo" but didn't realize that was referencing the nested timeline versus master timeline - thanks for the guidance.

 

I will make sure to include a CodePen with questions in the future.

 

// TweenTo(10) = Tweening to time in "TimeLineOne", duration(3) = amount of time in "TimeLineMasterOne"
    .add(TimeLineOne.tweenTo(10).duration(3), 0)