Stefanp Posted April 26, 2023 Share Posted April 26, 2023 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 More sharing options...
Solution PointC Posted April 26, 2023 Solution Share Posted April 26, 2023 Sounds like you're trying target the y attribute. Please give this a try: gsap.to(".bars", { attr: { y: 250 } }); Happy tweening. 2 Link to comment Share on other sites More sharing options...
Stefanp Posted April 26, 2023 Author Share Posted April 26, 2023 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 More sharing options...
PointC Posted April 26, 2023 Share Posted April 26, 2023 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. 4 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now