Jump to content
GreenSock

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

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

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

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

 

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

  • Like 2
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

If the goal is to randomize things a bit, here's how I would do it:

See the Pen yLbpmJb?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You can add as many circles as you want and you don't need to update the code at all. 

 

Does that help?

  • Like 5
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

You just forgot to put your boxHeight inside that resize function, so it was always using the initial value. You also didn't reset the "y" value of each box on resize. You don't really need a timeline at all. Here's how I'd do it:

 

See the Pen KKmQeGG?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

Anytime. Happy to help. 

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

×