Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
TomWWD

Continuing timeline while infinite yoyo runs, to be stopped later.

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

Hey guys

Sorry for the very basic question, but i'm running an animation linked in the codepen (very simple state at the moment) and there's 2 parts that i'd like to loop while other animations in the timeline play, to be stopped at a later point.

For example, if I added

.to("#anim-loadingdot", 1, {repeat:-1, yoyo:true, bezier:{values:MorphSVGPlugin.pathDataToBezier("#anim-loadingpath", {align:"#anim-loadingdot"}), type:"cubic"},ease:Linear.easeNone})

the timeline would wait infinitely for it to finish before continuing.

 

Is it possible to set this to run "infinitely" at a certain point, and then come back to stop it later?

 

Thanks in advance and sorry for the basic question.

 

See the Pen rdzmRP by TomBismuth (@TomBismuth) on CodePen

Link to comment
Share on other sites

Hi @TomWWD :)

 

You can add an infinitely repeating tween to a timeline and the next tween will go after the infinite tween finishes its first iteration. You do have to be using TweenMax 1.20.0 or later. Your demo is currently using 1.18.2 which is over 2 years old.  More info here:

 

If you need to control that particular infinite tween separately from the main timeline, you could also create a tween or timeline for that repeating animation too. It would make it easier to control.

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 6
Link to comment
Share on other sites

Thanks Craig, I didn't imagine it would be so simple.

What is the most concise way to stop it later in the timeline, after it's served it's function?

Link to comment
Share on other sites

If it were me, I'd probably name that infinite tween so you can easily control it later. Then add it to the main timeline. Maybe something like this.

 

See the Pen PRKLKO by PointC (@PointC) on CodePen

 

You could also put that infinite animation in a function and call it after any of the tweens on the main timeline. As with all things GreenSock, there are many roads to the goal.

 

Hopefully that helps. Happy tweening.

:)

 

 

  • Like 5
Link to comment
Share on other sites

On 25/03/2018 at 3:48 PM, PointC said:

If it were me, I'd probably name that infinite tween so you can easily control it later. Then add it to the main timeline. Maybe something like this.

 

See the Pen PRKLKO by PointC (@PointC) on CodePen

 

You could also put that infinite animation in a function and call it after any of the tweens on the main timeline. As with all things GreenSock, there are many roads to the goal.

 

Hopefully that helps. Happy tweening.

:)

 

 

 

Yep, that sorted it! Thanks again.

  • Like 3
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.
×