Jump to content
GreenSock

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

What's the proper way to use stand alone animation that is supposed to play throughout the timeline alongside with chained animations?

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

I have a group of animation that would be executed one after the other which is perfect to do with timeline and its labels but I also want to add on a single repeating animation that would be playing throughout this whole timeline and would end when the timeline ends. When I added this stand alone animation inside the timeline in the first label, everything else waited for it to finish playing. It still happened even if I put it at the top before the chain animation with labels and without using any labels to calculate the timing.

 

Of course, I can choose not to use labels at all and calculate the time needs to be added in between all the animations manually but that would defeat the purpose of using the timeline in the first place.

 

//want to repeat this sprite throughout the whole timeline
timeline.to('.repeating-animation', 1.2, {
  repeat: 4, //anyway to calculate this automatically so that it stops when the timeline ends instead of giving a fixed value?
  backgroundPosition: "-10px 0",
  rotation: 0.01,
  ease: SteppedEase.config(5)
}, "0") //starts at the beginning

//followed by chained animation 
//but everything down below waits for the reapting animation above to be finished before executing
.addLabel("label1")
.from('.sample', 1, { autoAlpha: 0, ease: Sine.easeOut }, "label1+=0.5")

.addLabel("label2")
.from('.sample2', 1, { autoAlpha: 0, ease: Sine.easeOut }, "label2+=0.5")

.addLabel("label3")
.from('.sample3', 1, { autoAlpha: 0, ease: Sine.easeOut }, "label3+=0.5")

//and so on

 

I'm wondering

- if there is a cleaner proper way to play this repeating animation throughout the timeline.

- if there is a way to make the number of times being repeated to be dynamic to total length of the timeline? So, it stops when the timeline ends?

 

Thanks in advance!

Link to comment
Share on other sites

Hi @LipstickVoid :)

 

You could calculate the repeats by dividing the duration of the main timeline by the duration of the repeating tween/timeline (without the repeats). They may not end at exactly the same time though.

 

I think adding an onComplete callback to the main timeline would be the easiest approach. Set the repeating timeline repeats to -1 and then use your main timeline onComplete to pause or kill that repeating timeline. 

 

Does that help? Happy tweening.

  • Like 3
Link to comment
Share on other sites

On 6/20/2018 at 11:20 PM, PointC said:

Hi @LipstickVoid :)

 

You could calculate the repeats by dividing the duration of the main timeline by the duration of the repeating tween/timeline (without the repeats). They may not end at exactly the same time though.

 

I think adding an onComplete callback to the main timeline would be the easiest approach. Set the repeating timeline repeats to -1 and then use your main timeline onComplete to pause or kill that repeating timeline. 

 

Does that help? Happy tweening.

 

Yes, it does. Thank you.

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