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