Jump to content
Search Community

Repeat animation without affecting total duration

fitzmode test
Moderator Tag

Recommended Posts

Hey there,


I have a Timelinelite instance where I running both "single shot"  and "repeating" animations, however, I'd like the "timeline.totalDuration()"  to not include repeat. My goal from the below is to get a total duration of 1.5sec , that is duration without repeat.

Is there a method I can use to get that?


const timeline = new Timelinelite({paused: true});

//Animation A ( 1 second duration)
  .to('#box',{x: 0,duration: 1 }, 0)
//Animation B ( 0.5 second duration)
  .fromTo('#box',{x: currentX - 2},{x:currentX + 2,duration: 0.5, repeat: -1}, 0.5);


Link to comment
Share on other sites

Hey fitzmode and welcome to the GreenSock forums!


15 minutes ago, fitzmode said:

I'd like the "timeline.totalDuration()"  to not include repeat.

Sorry, that's just not how it's built to work. It always will include the repeat amount.


However, you could create the tween separate from the timeline and then add it to the timeline and get the duration from the tween that way:

See the Pen rNVNpVE by GreenSock (@GreenSock) on CodePen


Note that I'm using GSAP 3 format (you kind of have a mix of the two which is confusing). 


Maybe if you better described your goal we could help you in getting there.


Side note: your second tween is going to override your first tween in the example code that you gave. I'm curious why you set it up that way.

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