Kenny Timber

Hello everyone, I would like to know which combination is the most suitable: GSAP + React or GSAP + Angular?

Yes, you can animate elements in React using the .elementClassName class. However, directly modifying the DOM in React is typically seen as bad practice. Instead, you should access the DOM element with a ref and then animate it using the React animation API. Directly altering the DOM is frowned upon in the programming language for a number of reasons. Your code may become less reusable in the beginning. The code that alters the DOM must be repeated if you need to animate the same element more than once. Second, it can reduce the performance of your code. Directly altering the DOM can sometimes be less effective, but React's animation API is optimized for efficiency.

One way to do this is to apply the hover effect after storing the initial box shadow value in a variable or data attribute. Here is a demonstration using GSAP: // Capture the original box shadow value const box = document.getElementById('myBox'); const originalBoxShadow = box.style.boxShadow; // Apply hover effect with GSAP gsap.to(box, { boxShadow: "0px 0px 10px 5px red", duration: 0.3, paused: true, // Pause the animation initially ease: "power2.out" }); // Revert to the original box shadow on mouseout box.addEventListener('mouseout', () => { gsap.set(box, { boxShadow: originalBoxShadow }); }); // Trigger the animation on hover box.addEventListener('mouseover', () => { gsap.play(); });