Jump to content
Search Community

Specify Different Progress Start Times For Elements Animated With .to()

ApplePieGiraffe test
Moderator Tag

Recommended Posts

Hi,

 

I'm animating a bunch of elements with the class name circle in a timeline using the to() method, like so:

 

let tl = gsap.timeline()

tl.to('.circle', {
  duration: 1.5,
  repeat: -1,
  y: 100,
}, 0)

 

At the moment, all of the animations have the same progress point at which they begin (0).

 

I would like to specify a different start progress point for each element animated with the tween shown above.

 

So I could start the animation of the first circle element at 50% progress, the next at 75% progress, or whatever, etc.

 

How can I do this when animating a collection of elements with to()?

Link to comment
Share on other sites

On 7/22/2021 at 8:58 PM, ZachSaucier said:

It sounds like you're looking for GSAP's staggers.

 

If you need more customization, use a functional value for the delay property.

 

Hi, sorry for my late reply!

 

What I meant was that I would like all of my animations to start playing at the same time, but at different points in their animation progress (e.g., one at 50%, another at 75%, etc.).

 

GSAP's staggers adds a delay between when each animation begins to play (which is not what I want because I want all of the animations to start playing at the same time), and I'm not sure how to accomplish what I want using a functional value for the delay property (I tried returning negative values for the delay property to see if that would start any animations in the middle of its progress, but that didn't seem to do anything).

 

Is there some way I can use either of those methods to accomplish this?

Link to comment
Share on other sites

On 7/24/2021 at 9:41 PM, OSUblake said:

Sounds like you might want to look at tweenFromTo().

https://greensock.com/docs/v3/GSAP/Timeline/tweenFromTo()

 

 

Hi, Blake, thanks for that!

 

I'm not sure I understand how to do that with tweenFromTo().

 

I currently have something similar to...

See the Pen LYyeKEy by ApplePieGiraffe (@ApplePieGiraffe) on CodePen

 

I'd like to have something like... 

See the Pen MWmrMJw by ApplePieGiraffe (@ApplePieGiraffe) on CodePen

 

Except I don't want to simply copy-and-paste the animation code for each .circle element in order to set a different start progress point for it if I can avoid that.

 

Is there a more concise way of doing this? 🙂

Link to comment
Share on other sites

@GreenSock

 

Hey, do you mind if I ask for your help with one more thing?

 

I edited the code above to change the height of the box at a certain screen size, and I realized that some of the values for the animation need to be recalculated then (otherwise the circles don't move all the way to the top of the box).

 

I tried killing and re-creating the timeline when the window is resized, but that's giving me some funky results, and I'm not sure why.

 

See the Pen YzVevVw by ApplePieGiraffe (@ApplePieGiraffe) on CodePen

 

How can I recalculate the values for the animation and play it again when I need to (like when the screen is resized)?

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