Jump to content
GreenSock

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

simple staggerTo and cycle in timeline

Recommended Posts

Hi,

I'm trying to stagger in a series of boxes with opacity. Maybe the cycle feature is an overkill for this but I'd like to learn how to use it. All of the tutorials I've found on the cycle feature seem a bit complicated. Is there an example of a simple staggerTo with cycle in a regular timeline anywhere?

 

var tl = new TimelineMax();
tl.to(".circle", .5, {opacity:-1})
 .staggerTo(".boxes", 1, {
    cycle:{
      opacity:[-1, 1]
      ease: [Power4.easeInOut]
    }
  }, 0.05)

.to .....

 

-thanks

Link to comment
Share on other sites

Hi kvnmcwebn,

 

this example is in the DOCs of staggerTo:  

 

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

 

"Instead of defining a single value (like x:100, rotation:90), you can define an Array of values to cycle through (like cycle:{x:[100,-100], rotation:[30,60,90]}) or even use function-based values (like cycle:{x:function() { return Math.random() * 200; }}). The amount of functionality you can pack into a single line of code is staggering (pun intended)."

 

Do you miss a concrete point? Do you have a certain question?

 

Kind regards

Mikel

 

 

  • Like 4
Link to comment
Share on other sites

Hi @kvnmcwebn :)

 

Cycle may seem confusing at first, but once it 'clicks' for you, you'll see that it's pretty simple to use. In your case you mention staggering the opacity of some elements. If you want them all to stagger in to an opacity of 1, a regular stagger is what you'd want to use. (Just an FYI - I see you have an opacity of -1 in your cycle values. That won't break anything, but opacity only goes from 0 to 1. )

 

Cycle comes in handy when you don't want the array of elements to do the same thing or end at the same value. Here's a basic example like you mentioned with a series of boxes animating in. You'll see I have 5 values in the opacity cycle array. The first box animates to an opacity of 0.2, the second to 0.4 and so on. 

 

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

Does that make sense?

 

Hopefully that helps.

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

Hi Mikel, 

Lol, yes that's a staggering demo. This feature is going to save me a lot of time. I have a couple questions, first I don't understand how you're getting the object's color values to cycle when you have the initial value set in the css with fill or backgroud-color attributes.  Second is a function required to loop the cycle?I wasn't able to use repeat or yoyo anywhere in or around the cycle property.I have to learn how to use simple functions in GSAP can you recommend any tutorials?

 

See the Pen rwREwe by kvnmcwebn (@kvnmcwebn) on CodePen

 

Thanks very much. 
-Kevin

Link to comment
Share on other sites

1 hour ago, PointC said:

 

 

Hi Point C,

I was replying at the same time you were. Thanks for the further explanation, I'm starting to get it now. I wasn't aware we can set multiple properties on one value like that.  That's actually going to be super helpful for my project. 

Thanks!

  • Like 2
Link to comment
Share on other sites

I'm confused. Should that stagger be doing something differently? It seems like it's working fine without cycle. Is there a different desired behavior?

 

Thanks.

:)

Link to comment
Share on other sites

Pardon yes, I'd like to put in multiple attributes for one value like you had in your example:

 

  opacity:[0.2, 0.4, 0.6, 0.8, 1]
     }
Link to comment
Share on other sites

o.k. - I'm still not sure of the desired outcome here, but you can put those values in for opacity like this:

 

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

Does that help?

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

Point c thanks a million that's what I was trying to do. I just didn't know the correct syntax.

Link to comment
Share on other sites

Ah but it looks like the timeline thinks that both of these tween methods have an infinite duration... none of the tweens that come after them play... hmm

Link to comment
Share on other sites

Yep - infinite tweens won't let the next one play. There are a few workaround options for you though. This thread has information that should guide you to a solution.

Hopefully that helps. Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

great thanks I'll give it a read

Link to comment
Share on other sites

Hi Point C,

I'm having trouble with getting a function to fire off  with the onComplete as per your example:
 

See the Pen XgQrVw by kvnmcwebn (@kvnmcwebn) on CodePen

 

Link to comment
Share on other sites

Hi kvnmcwebn,

 

As PointC mentioned: "infinite tweens won't let the next one play".

 

As an alternative try it with a certain position parameter of a tween.

See https://greensock.com/position-parameter

 

Or this example - tween 02 starts 2 sec after beginning of the timeline:

 

See the Pen XgQMpe by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

  • Like 2
Link to comment
Share on other sites

Yep - @mikel's demo shows how you can get around the infinite tween problem with the position parameter. The thread I listed above also has some other options available. 

 

Let us know if you need additional assistance.

 

Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

No I see what I did. I didn't wrap the stagger in the function as in your example. Between that and mikels example I should be all good. Thanks guys 

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