Jump to content
Search Community

simple staggerTo and cycle in timeline

kvnmcwebn test
Moderator Tag

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,

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

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

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