Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
carljohnston.uk

Using staggerTo / staggerFrom with "this"

Recommended Posts

Hi all,

This is something that I've been wondering about, but haven't worked out the best solution for.

 

What I'm trying to do is animate an array of elements on the x axis by the width of each element.
For example:

element1 = 20px

element2 = 40px

 

Using staggerTo / staggerFrom, I'm looking to animate element1 by 20px and element 2 by 40px.
I've attached a codepen to what I was hoping would work.

Is it possible to do these kinds of animations using the "this" keyword?

See the Pen yvoQjp by carljohnston-uk (@carljohnston-uk) on CodePen

Link to post
Share on other sites

You can use xPercent to animate element relative to it's own width and yPercent for height. Also, in demo there is commented code if you wanted to increment x by 20 for each element.

 

See the Pen rJzoBo?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 4
Link to post
Share on other sites

Thanks @sahil,

That's great for this case, thank you.
Looking at it from a wider perspective, can the "this" property be used for more advanced calculations, based on the properties of each element in the target array?

Link to post
Share on other sites

Hey @carljohnston.uk!

 

14 minutes ago, carljohnston.uk said:

Looking at it from a wider perspective, can the "this" property be used for more advanced calculations, based on the properties of each element in the target array?

 

Yes, But...

 

Inside the Tween/Timeline, this refers to the Tween/Timeline itself, not to the element being targeted.

 

You'll probably will want to use function based values ini order to target the individual element. Check the bellow blog post as it should give you some ideas on what can be done:

 

https://greensock.com/1-19-0/

 

  • Like 5
Link to post
Share on other sites

@carljohnston.uk After reading Dipscom's answer I had deleted mine, but in case of stagger tweens, index is returned as zero for all elements so you may still want to use following solution.

 

You will have to pass an array of elements and access them by incrementing index.

 

See the Pen ddzweO?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 1
Link to post
Share on other sites

@Sahil,

Thank you for the help.

Certainly @Dipscom's answer has opened up plenty of possibilities, including the solution you've provided.

Thank you both for the help!

  • Like 1
Link to post
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.

×