Translate y not working but when replaced with opacity the animation is working

[johnmathew_247]

when i use the property opacity in my gsap animation in menu.js file for my Links the animation is performing without the problem but if i just change the opacity to a translate y/ top - it's not working. can someone help me out !!!

App.js Menu.js Nav.js

[elegantseagulls]

Can you set up an MVP via CodePen or CodeSandbox? Downloading a JS file isn't an ideal way for us to debug the issue, and you'll likely be able to see what's happening if you break it down further.

 

 

[johnmathew_247]

See the Pen oNGLJGg?editors=0011 by john247 (@john247) on CodePen

 click this link please

[GreenSock]

Hi @johnmathew_247. That CodePen doesn't work at all and even when I enable TypeScript, it says: "Uncaught SyntaxError: The requested module 'https://cdn.skypack.dev/react-router-dom' does not provide an export named 'Switch'". Please provide a functional demo and we'd be happy to take a look. 

 

If it helps, here's a starter template from CodeSandbox: https://codesandbox.io/s/gsap-react-starter-ut42t

 

Also, have you tried changing the "y" value to something else, like 200? I wonder if the issue is simply that your element is ALREADY at a y value of 100, thus it looks like nothing is happening. I'm totally guessing at this point since we don't have a functional demo to assess.

[johnmathew_247]

https://codesandbox.io/s/translate-not-working-tjscd

 

here is my codesandbox link. please check into it.

components> menu.js > line:66

[GreenSock]

Oh, that's because browsers don't render transforms on inline elements like that. It has nothing to do with GSAP - open Dev Tools and you'll see that GSAP is indeed applying the transforms properly, but some browsers don't render them on display: inline elements. Try setting them to inline-block.