Jump to content
GreenSock

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

Is this a good way to loop an animation?

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 everybody, first time posting here.

 

I've created this example on CodePen to loop a certain part of an animation consisting two frames. I did this by declaring two variables as two separate timelines (TimelineLite and TimelineMax), and then called the function to replay the second frame only.  You can take a look at how I wrote this by referring to the CodePen link.

 

I'm still learning both GreenSock and JavaScript, and I feel I've come a long way, but I'd like to know is there a better way to code this without using multiple timelines? Even though I'm satisfied with how the code works, I'm open to feedback if there is a neater way to write this code.

See the Pen WOQXPa by DavidRizzo (@DavidRizzo) on CodePen

Link to comment
Share on other sites

you don't need both Timeline libraries, just use Timelinemax.

 

Also, there is a lot of code that you don't need. Take a look at this to start and some else can show you the 100 ways to do a replay which at these moment they all escape my mind for some reason. lol

 

See the Pen dRMKJK by Felipe (@Felipe) on CodePen

 

  • Like 2
Link to comment
Share on other sites

One of the hundred ways is to use TimelineMax with a repeat parameter.

 

var timelineOne = new TimelineMax({repeat:-1, repeatDelay:3); // Infinte repeat with a delay of 3 seconds between repeats
var timelineTwo = new TimelineMax({repeat:3); // Repeats three times, plays four times.

 

  • Like 3
Link to comment
Share on other sites

added looping to the codepen using onComplete to call a replay function and onCompleteParams to pass a label that is in the timeline.

Link to comment
Share on other sites

Thanks for the feedback, guys. I appreciate the response.

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.

×