Jump to content
Search Community

Loop a timeline but only from a later point.

barrowman 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

Hi,

 

Is there a way to loop a Timeline but only say from after a certain point in the original timeline.
 

I'd like to loop an animation, but only after the initial build, so ie after the timeline is finished, restart it again at 3 seconds.

 

I suppose I could just make two separate timelines at worst but wondered if there was a way to do this within one timeline.

 

Thanks.

 

//-----------------------
//til = new TimelineMax();
til = new TimelineMax({repeat:3, repeatDelay:0.1});
//-----------------------
til.from(root.Image_01, 2.00, {y:550, ease:Sine.easeOut, overwrite: false}, 0.0)
//------------------------------
.to(root.Brand_01, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 3.0)
.to(root.Tag_01, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 3.0)
.to(root.Image_01, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 3.0)
//-------------
.from(root.Brand_02, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 3.0)
.from(root.Tag_02, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 3.0)
.from(root.Image_02, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 3.0)
//---------------------
.to(root.Brand_02, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 6.0)
.to(root.Tag_02, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 6.0)
.to(root.Image_02, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 6.0)
//----------------------
.from(root.Brand_03, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 6.0)
.from(root.Tag_03, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 6.0)
.from(root.Image_03, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 6.0)
//---------------------

 

Link to comment
Share on other sites

Instead of telling the timeline to repeat (which will make it go back to the beginning) you can use an onComplete callback that plays from wherever you want

var tl = new TimelineLite({onComplete:playFromCustomSpot});
tl...

function playFromCustomSpot() {
 tl.play(5)// play at 5 seconds or a label
}

 

  • Like 5
Link to comment
Share on other sites

Okay, my ignorance again is a stumbling block and buzzkill.

I can't see what I'm doing wrong here but it's just looping from the start each time. :-(

 

til = new TimelineMax({repeat:3, repeatDelay:0.0, onComplete:playAfterBuild});
//-----------------------
til.add("one", 3.5)
.add("two", 6.0)
.add("three", 8.5)
.from(root.Image_01, 2.00, {y:550, ease:Sine.easeOut, overwrite: false}, 0.0) -- THIS IS THE ONE OFF ANIMATION THAT I DONT WANT TO REPEAT
.to(root.Brand_01, 0.06, {alpha:0, ease:Sine.easeOut, overwrite: false}, "one")
.to(root.Tag_01, 0.06, {alpha:0, ease:Sine.easeOut, overwrite: false}, "one")
.to(root.Image_01, 0.09, {alpha:0, ease:Sine.easeOut, overwrite: false}, "one")
//-------------
.from(root.Brand_02, 0.06, {alpha:0, ease:Sine.easeOut, overwrite: false}, "one")
.from(root.Tag_02, 0.06, {alpha:0, ease:Sine.easeOut, overwrite: false}, "one")
.from(root.Image_02, 0.09, {alpha:0, ease:Sine.easeOut, overwrite: false}, "one")
//---------------------
.to(root.Brand_02, 0.06, {alpha:0, ease:Sine.easeOut, overwrite: false}, "two")
.to(root.Tag_02, 0.06, {alpha:0, ease:Sine.easeOut, overwrite: false}, "two")
.to(root.Image_02, 0.09, {alpha:0, ease:Sine.easeOut, overwrite: false}, "two")
//----------------------
.from(root.Brand_03, 0.06, {alpha:0, ease:Sine.easeOut, overwrite: false}, "two")
.from(root.Tag_03, 0.06, {alpha:0, ease:Sine.easeOut, overwrite: false}, "two")
.from(root.Image_03, 0.09, {alpha:0, ease:Sine.easeOut, overwrite: false}, "two");
//-----------------------
function playAfterBuild() {
 til.play("one")//
};

 

Link to comment
Share on other sites

It looks like you still have your timeline set to repeat. It won't complete until all the repeats are done.

The reason this technique works is because we are not using the repeat feature, we are using only a custom onComplete callback to handle everything.

Please study the CodePen PointC provided.  Notice how he does not use repeat:

 

new TimelineMax({onComplete:onComplete});

 

Please consider creating a CodePen for these types of issues. It is much easier for us to find problems. Thanks.

  • Like 1
Link to comment
Share on other sites

I don't think you can use Adobe Animate on CodePen, but you can just create a simple pen with a few divs to demonstrate the problem or question. Just something like my little demo above is great. I have several templates in my CodePen account that load all the GSAP files and have some divs and CSS ready for forum answers.  It saves quite a bit of time if you use the service frequently.

 

Happy tweening.

:)

Link to comment
Share on other sites

Yeah, I would follow PointC's advice. Just a few divs and few lines of code could replicate enough of your issue. Doesn't matter if its AnimateCC or not, the GSAP code and concepts are the same. 

 

Just wanted to add that it is possible to run AnimateCC stuff on CodePen. I don't have time for a full tutorial but the basic idea is

 

- make sure you load all the library files that Animate CC needs (easel js stuff and GSAP stuff).

- paste all the JS that animate spits out into the JS tab of CodePen

- paste all the HTML that animate spits out into the HTML tab of CodePen

 

Here is an example from when Flash exported HTML5 stuff (pre-Animate CC) but its the same basic idea.

 

 

The cool thing is that GSDevTools can control it and you don't have to do anything special. 

 

I imagine if you are using custom bitmap images (png, jpg) you would need to upload them and update some links. Just showing this demo as a proof of concept. 

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