How do I capture the initial value of an item?

[Dean Draper 4 Likes (Newbie)]

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.

[Rodrigo 5,899 Likes (Superhero)]

Hi @Dean Draper and welcome to the GreenSock forums!

 

Thanks for being a Club GreenSock member and supporting GreenSock! 💚

 

You can use the getProperty method for that:

https://greensock.com/docs/v3/GSAP/gsap.getProperty()

 

Also another option could be the revert method that every GSAP Tween/Timeline has:

https://greensock.com/docs/v3/GSAP/Tween/revert()

 

If you keep having issues, please remember to include a minimal demo so we can have a better look at what could be the problem.

 

Hopefully this helps.

Happy Tweening!

[PointC 14,466 Likes (Superhero)]

In addition to @Rodrigo's sound advice, I'd add that you don't really need to worry about initial values with hover animations. You'd generally just create a tween or timeline and play/reverse on hover in/out.

 

Thanks for being a Club member and welcome to the forum.

 

[Dean Draper 4 Likes (Newbie)]

I like the sound of that. How do I reverse afterwards? Sorry, I'm a total noob with all of this. I used it once during school, and I'm just now picking it up again in anticipation of a client who wants GSAP work.

[PointC 14,466 Likes (Superhero)]

Here's a quick demo with a loop through the targets and creating a simple timeline for each. Then we add the enter/leave listener to play/reverse the timeline on hover.

 

See the Pen rNqbOxm by PointC (@PointC) on CodePen

 

Happy tweening.

 

[Dean Draper 4 Likes (Newbie)]

That looks perfect. Thank you so much!

[Kenny Timber 0 Likes (Newbie)]

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