[GSAP + React vs GSAP + Angular]

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

[Is it possible to animate in React without using ref?]

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.

[How do I capture the initial value of an item?]

On 5/26/2023 at 7:38 PM, Dean Draper said:

If I'm doing something like using gsap to animate a box shadow on hover, is there a way to record the original value of the box shadow before changing things so that I can revert back to what was there before? I am using a hover effect on a page where 3 different items should have hover effects, and I don't want to have to write a custom function for each one's reversion. It would be nice to capture that state in a variable, and just revert.

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();
});