My React Login Form animation does not works sometimes

[Manas Telavane]

I have the working code in html,css,javascript.

See the Pen 2d338b0adf97472ebc5d473cf1fa910b?editors=0010 by dsenneff (@dsenneff) on CodePen

 

But , while converting it to ReactJs , I am facing this issue.

See the Pen by embed (@embed) on CodePen

[Manas Telavane]

This is my ReactJs code, which works sometimes.

https://codesandbox.io/embed/silent-grass-0q5lvn?fontsize=14&hidenavigation=1&theme=dark

[GreenSock]

Welcome to the forums, @Manas Telavane

 

A few comments: 

1. Please make sure you get the permission of the original author of that form, Darin Senneff. https://codepen.io/dsenneff/details/NyVrzB/2c3e5bc86b372d5424b00edaf4990173 
2. You definitely seem to be missing some React-related things (unrelated to GSAP), like useEffect() and a cleanup function, etc. We don't have the resources to analyze all your code or convert it to React for you, but this article should help a lot:
3. You're using the very old syntax, like TweenMax. I'd strongly recommend updating to the more modern GSAP 3 syntax (almost 4 years old now). There's a migration guide here: 
4. Don't forget that MorphSVGPlugin is a members-only benefit for Club GreenSock members ("Shockingly Green" and higher). The trial version works on CodePen for free as much as you want, but once you go to deploy it on your site, you'll definitely need to get an official copy by signing up. https://greensock.com/club

Good luck!