Jump to content
GreenSock

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

Timeline first element with repeat: -1 not triggering second one

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 community!

 

I'm first time playing around with GSAP and I love it. I tried to build a little demo where a bee is flying. The clouds are moving but If I use no timeline the delayed clouds (cloud 3 & 4) are moving too fast. Any Idea how I can fix that?

 

I tried to use a timeline but it is not working. I think because the first element (#bee) has an infinite repeat (-1) so its not starting the second tween. Is there a way to start the tweens in a timeline manually? I didnt understand the docs and couldn't find it.

 

Thank you!

See the Pen pLxPEP by elpeyotl (@elpeyotl) on CodePen

Link to comment
Share on other sites

Hi @elpeyotl and welcome to GreenSock! Off the bat, I think you're better off using individual tweens/timelines for this purpose, because the elements need a bit of asynchronous timing and because of the need for individual repeats.

 

That said, here is a fork of your pen showing how to construct a timeline, for future needs. Notice the offsets I'm using to begin a few tweens on the timeline at 0 and clouds 3 & 4 at 5 seconds.

 

See the Pen zWmyWN by sgorneau (@sgorneau) on CodePen

 

I'm also including this pen to show how you can use a mix of tweens and timelines to help hold the sync of certain tweens while leaving the timlinelines themselves to be out of sync with each other. To give a random feel to the animation.

 

See the Pen pLxqxj?editors=1010 by sgorneau (@sgorneau) on CodePen

 

  • Like 5
Link to comment
Share on other sites

@elpeyotl, welcome to the forums. Nice animation!

 

Great solutions, Shaun!

Link to comment
Share on other sites

Thank you for your fast responses! Awsome!

 

So if I use:

 

tl.to();

 

I can give the element an offset and it will then start then? Asynchron?

 

If I use:

tl.add()

 

It will run after the previous animation is finished? Is that right?

Link to comment
Share on other sites

No, in either case you have total control over where the animation gets placed into the timeline. You simply use the position parameter (in either case). See https://greensock.com/position-parameter for more details. Does that help? 

 

Think of to() as a shortcut:

//long, with add():
tl.add( TweenLite.to(target, 1, {x:100}), "+=2");

//short (same result):
tl.to(target, 1, {x:100}, "+=2");

 

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