Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mazzu98

Problem with Y atribute

Recommended Posts

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

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? 

  • Like 5
Link to post
Share on other sites

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

  • Like 3
Link to post
Share on other sites

okay, i understand, it helps me a lot.

thanks 😀

Link to post
Share on other sites

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.

:)

 

  • Like 2
  • Thanks 1
Link to post
Share on other sites

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

Link to post
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.

×