Jump to content
Search Community

Using staggerTo / staggerFrom with "this"

carljohnston.uk 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 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 comment
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 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...