Jump to content
GreenSock

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

Tween translate overwriting css properties

Recommended Posts

Hey guys, I have a problem with a tween. I have a SVG with some tailwind css and there is breakpoints where I center the absolute positioned SVG but whenever I apply the y property, gsap uses a translate instead of translate-y which causes my SVG to not be centered anymore because it overwrites my x value.

 

How can I tell gsap to not apply any CSS on the x axis?

See the Pen zYwKRev?editors=1010 by godhandkiller (@godhandkiller) on CodePen

Link to comment
Share on other sites

You should set your transforms with GSAP first.

 

// try this
gsap.set('#tracking-path', {
  x: "+=0"
});

// or be explicit
gsap.set('#tracking-path', {
  x: 0,
  xPercent: -50
});

gsap.timeline()
  .from('#tracking-path', { // no need for jQuery
  	yPercent: 100, // xPercent/yPercent for %
  	ease: 'customEase', 
  	duration: 0.8 
}, '<0.3')

 

 

  • Like 1
Link to comment
Share on other sites

11 hours ago, hmontelongo said:

whenever I apply the y property, gsap uses a translate instead of translate-y which causes my SVG to not be centered anymore because it overwrites my x value.

If I understand your comment correctly, I think you might be misunderstanding how transforms work. There can only be ONE transform value, and that one value can have a bunch of individual components.

 

So let's say you've got this: 

transform: translateX(100px);

And then you add another class that has this: 

transform: translateY(50px);

You will NOT get this: 

transform: translateX(100px) translateY(50px);

It won't combine the values in CSS. 

 

We've put a TON of effort into transforms in GSAP. It's one of its biggest strengths because it lets you control each component independently (x, y, scaleX, scaleY, rotation, etc.) You cannot do that with CSS. 

 

And like Blake said, make sure you always apply transforms via GSAP because it gives you the best performance and accuracy. See this.

  • Like 1
Link to comment
Share on other sites

@OSUblake @GreenSock Thank you for the response. I was able to update my markup to make work but thank you for the information, this will help me in the future.

Link to comment
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.
×