mazzu98 Posted February 14, 2021 Share Posted February 14, 2021 Hi, I'm new with gsap, im trying a little animation with a svg, but I have a problem with 'y' atribute. I tried to move the bottom bar on the y axis, but it goes too high, i dont know what should i do, when i use the x atribute works fine. thanks for the time! See the Pen dyONjXG by mazzu98 (@mazzu98) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted February 14, 2021 Solution Share Posted February 14, 2021 It looks like GSAP is doing exactly what it's supposed to. Notice that your element has a transform applied to it already: transform="translate(0 75.828)" So that means its "y" is starting at 75.828, so when you animate it to -1, it's moving it a total of 76.828 units up. Did you want to only move it 1 pixel up from wherever it currently is? If so, just use a relative value by adding a "-=" or "+=" prefix: gsap.to('#barraBot',{y:"-=1" , duration: 3}) So in this case, that'll take the current value (75.828) and subtract 1 from it, and use that as the end value of the tween (74.828) Does that clear things up for you? 5 Link to comment Share on other sites More sharing options...
mikel Posted February 14, 2021 Share Posted February 14, 2021 Hey @mazzu98, Try to hand-code simple shapes.It's fun and quick to learn. So you can bring everything down to the 'pixel' and avoid transforms. Happy tweening ... Mikel 3 Link to comment Share on other sites More sharing options...
mazzu98 Posted February 14, 2021 Author Share Posted February 14, 2021 okay, i understand, it helps me a lot. thanks 😀 Link to comment Share on other sites More sharing options...
PointC Posted February 14, 2021 Share Posted February 14, 2021 Hand coding is the way to go for simple things as @mikel mentioned. When using your vector software for exports, I always recommend using a background rectangle so your elements don't end up with odd transforms. I have a short tutorial about that here: https://www.motiontricks.com/use-background-rectangle-with-svg-exports/ Happy tweening. 2 1 Link to comment Share on other sites More sharing options...
mazzu98 Posted February 14, 2021 Author Share Posted February 14, 2021 Wow, that is very useful information, thank you very much! 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