Problem with Y atribute

[mazzu98]

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

[GreenSock]

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? 

[mikel]

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

[mazzu98]

okay, i understand, it helps me a lot.

thanks 😀

[PointC]

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.

 

[mazzu98]

Wow, that is very useful information, thank you very much!