Share Posted February 14 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 post Share on other sites
Solution Share Posted February 14 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 post Share on other sites
Share Posted February 14 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 post Share on other sites
Author Share Posted February 14 okay, i understand, it helps me a lot. thanks 😀 Link to post Share on other sites
Share Posted February 14 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 post Share on other sites
Author Share Posted February 14 Wow, that is very useful information, thank you very much! Link to post Share on other sites
