I’m using GSAP for animating a React component, but I’m encountering an issue with the .from method. When using gsap.to(), the animation works fine, but with gsap.from(), the animation seems to be stuck at the final point and disappears without showing the intended movement.
When using gsap.from(), the animation starts from the specified properties (e.g., y: -50), but it doesn’t animate smoothly from these initial properties to their final state. Instead, the element appears at the final state immediately and then disappears.
Troubleshooting Steps Taken:
Verified that navRef.current is correctly referenced and not null.
Ensured that the useEffect hook is correctly set up to run once on component mount.
Confirmed that GSAP is correctly imported and no errors are logged to the console.
What I Need Help With:
Why might the gsap.from() animation not be working as expected in this case?
Are there any common issues or pitfalls when using gsap.from() with React components?
How can I ensure that the animation smoothly transitions from the starting properties to the final state?
Any insights or suggestions would be greatly appreciated!
Can reffer to the following repo for the code
https://github.com/PrajwalMundargi/gsap-issue
What I Tried:
Implemented gsap.from() in a React component to animate an element’s appearance from a starting state (e.g., y: -50 and opacity: 0) to its final state.
Verified that the navRef was correctly assigned and that GSAP was properly imported.
Tried using gsap.to() as a comparison, which worked as expected, indicating that GSAP was functioning correctly.
Checked the useEffect hook to ensure it was running as intended.
What I Expected:
I expected the gsap.from() animation to smoothly animate the element from the initial properties (y: -50, opacity: 0) to its final properties (y: 0, opacity: 1).
Specifically, I wanted the element to start off-screen (above its final position) and fade in, creating a smooth transition effect.