Jump to content
Search Community

Apply same tween to class elements

Stefanp test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

What i'm trying to achieve is that all the <rect> elements in the svg move to position y:250. I thought it would be as straightforward as gsap.to(".bars" { y:250}).

But this applies the tween to the bars as a group. 

 

I'm probably being very stupid here, but I couldn't find anything to put me on the right track.

 

Can't I use a class selector for this and do I need individual tweens for each bar?🤔

See the Pen QWZvYym by stefanpullen (@stefanpullen) on CodePen

Link to comment
Share on other sites

That worked! Thanks a million. 

 

Can you briefly explain why I should be targeting the attributes and what the difference is with targeting the y property?

 

I'm also curious how you could then set up your tween to let the bars return to their individual original y position.

Link to comment
Share on other sites

x & y are attributes as well as CSS properties. Unless you put the y:250 in the attribute wrapper, GSAP will assume you want to animate the transform (translateY) which is what was happening in your demo. You wanted all the <rect> elements stacked on top of each other so you wanted to target the y attribute of the rectangles. It can be a little confusing with the overlap between properties and attributes. Bottom line, if you want to target a specific attribute, use the attr:{} wrapper.

 

15 minutes ago, Stefanp said:

I'm also curious how you could then set up your tween to let the bars return to their individual original y position.

I'm not sure what you mean here. It could be as simple as setting up a repeat of 1 and yoyo:true. It would depend on the desired outcome.

 

Happy tweening.

 

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