Jump to content
Search Community

How to repeat a timeline or a tween for a fixed duration?

tazeem123 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,

 

I have multiple small timelines added into a main timeline. And main timeline is controlled by a slider control and play pause buttons.

 

The small timelines can be a text animation with a read time wait, or an image animation. This is my set up for text + image animation screen.

 

I want to add a timeline to main timeline of an animation which keeps on repeating itself for the wait read time of a text animation timeline.

 

Is there anyway to repeat an animation or play an animation in a loop for X amount of time (in seconds)?

 

Thanx.

 

Link to comment
Share on other sites

Hello tazeem123, and Welcome to the GreenSock Forum!

 

I'm not exactly sure i understand your question regarding .. " I want to add a timeline to main timeline of an animation which keeps on repeating itself for the wait read time of a text animation timeline. "

 

To repeat a timeline you can use one of the special properties:

  • repeat : Number - Number of times that the timeline should repeat after its first iteration. For example, if repeat is 1, the timeline will play a total of twice (the initial play plus 1 repeat). To repeat indefinitely, use -1. repeat should always be an integer.
  • repeatDelay : Number - Amount of time in seconds (or frames for frames-based timelines) between repeats. For example, if repeat is 2 and repeatDelay is 1, the timeline will play initially, then wait for 1 second before it repeats, then play again, then wait 1 second again before doing its final repeat.
// repeat animation 3 times
// -1 would repeat forever
var tl = new TimelineMax({paused:true, repeat:3});
tl.to("myElement", 2, {rotation:"+=360"});
tl.play();

You could use repeat in TimelineMax and TweenMax

 

But if possible so we can understand what your trying to do.. could you please create a reduced codepen demo example so we can see the code you have tried in context.

 

Here is a video tut by GreenSock on How to create a codepen demo example.

 

Just a quick note about TweenMax:

 

TweenMax extends TweenLite, adding many useful (but non-essential) features like timeScale(), repeat(), repeatDelay(), yoyo(), updateTo(), and more. It also includes many extra plugins by default, making it extremely full-featured. Any of the plugins can work with TweenLite too, but TweenMax saves you the step of loading the common ones like CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin as well as EasePack, TimelineLite, and TimelineMax. Since TweenMax extends TweenLite, it can do ANYTHING TweenLite can do plus more. The syntax is identical. You can mix and match TweenLite and TweenMax in your project as you please, but if file size is a concern it is best to stick with TweenLite unless you need a particular TweenMax-only feature.

 

Thanks.. it will help us be able to help you better! :)

Link to comment
Share on other sites

Hi,

 

To complement Jonathan's great advice, to do that you'll have to create an instance on every read-pause you have in the timeline, something like this:

var mainTl = new TimelineLite(),
    child1 = new TimelineLite(),
    child2 = new TimelineLite(),
    child3 = new TimelineLite(),
    child4 = new TimelineLite();

mainTl
  .add(child1)
  //insert the reading-pause instance
  .to(element, time, {vars})
  .add(child2)
  //insert the reading-pause instance
  .to(element, time, {vars})
  .add(child3)
  //insert the reading-pause instance
  .to(element, time, {vars})
  .add(child4)
  //insert the reading-pause instance
  .to(element, time, {vars});

In that scenario I think it could be better and save some code to add a pause and call a function that creates that reading-pause animation and when is completed it resumes the main timeline:

var mainTl = new TimelineLite(),
    child1 = new TimelineLite(),
    child2 = new TimelineLite(),
    child3 = new TimelineLite(),
    child4 = new TimelineLite();

function readingPause(duration)
{
  TweenLite.to(element, duration, {vars, onComplete:resumeMain});
}

function resumeMain()
{
  mainTl.resume();
}

mainTl
  .add(child1)
  .call(readingPause,[duration])
  .addPause()
  .add(child2)
  .call(readingPause,[duration])
  .addPause()
  .add(child3)
  .call(readingPause,[duration])
  .addPause()
  .add(child4)
  .call(readingPause,[duration])
  .addPause();

Rodrigo.

Link to comment
Share on other sites

Hey Thanx for the reply. To make my query simple here is my code for the Tweens.

 

 

var testTween = new TweenLite();

testTween.to(targetElement, 10, {vars});

 

As shown above, testTween will tween itself for 10 seconds.

 

Now the question is "Is it possible to tween this for 15 seconds without changing the speed of the tween? i.e. repeating a tween 1.5 times."

 

I don't want to timescale the tween as it will slow down the animation.

 

Thanx.

Link to comment
Share on other sites

Mhh a very particular scenario may I say.

 

As far as I know there's no native way to do that, I made a try with a TweenMax instance but as soon as the decimal repeat amount was over, the instance jumps to it's end:

var t = TweenMax.to("#div1", 2, {left:200, repeat:0.5, yoyo:true/});

So basically you'll need to create your own code in order to achieve that. I got this working:

var t = TweenLite.to("#div1", 2, {vars, onComplete:partialReverse, onCompleteParams:["{self}"]});

function partialReverse(tween)
{
  var tweenTime = tween.duration();
  tween.reverse();
  TweenLite.delayedCall(
    tweenTime/2,
    function()
    {
      tween.pause();
    });
}

As you can see the callback can be used with any tween and any duration (it gives more flexibility). I don't know if this approaches your scenario, or if it'll be useful. Here you can see it working:

 

See the Pen ajwcJ by rhernando (@rhernando) on CodePen

 

Feel free to fork and adapt it to your needs.

 

Rodrigo.

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