Mouseover doesn't work anymore after play/reverse my timeline

[coolfarmer]

Hello guys!

 

I don't know why but my animation doesn't roll back at his initial state, and th result is that my mouseover doesn't work anymore.

I'm pretty sure it's my understanding who is the faulty.

 

I would appreciate any help.
Thanks!

See the Pen BaoPNKB by coolfarmer (@coolfarmer) on CodePen

[PointC]

GSAP is adding inline styles which are more specific than your CSS. 

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

 

You could fix it by adding an event listener for the mouseenter and using gsap to set() the fillOpacity it for you. If you want to stay with what you have right now, you can fix it like this:

fill-opacity: 0.1!important;

Happy tweening.

 

[coolfarmer]

I think it's worst than before with your 2 solutions. !important added some glitchs and mouseenter instead of :hover with css is not working.

 

New codepen:

See the Pen XWmBmJx by coolfarmer (@coolfarmer) on CodePen

 

My goal is pretty simple, the mouseover should work only if the rectangle is at scale 1.0.

Open my new codepen and you should see that the mouseover is working.

 

Now play the animation, the rectangle will scale at 1.3 and the mouseover will stop woking (this is good, I don't want the mouseover at this step).

Play again the animation, the rectangle will scale back to 1.0, and now the mouseover will not working anymore (this is incorrect).

 

Others ideas? 🙄

[PointC]

Looks like you changed the demo since I first looked at it. If you want to have something happen only if the rect scale is 1, you need to check for that condition with your mouseenter event.

 

if (gsap.getProperty("rect", "scale") == 1) {...}

 

[coolfarmer]

Ok I think I did it good this time! If it's the best way to achieve this mouseover thing without glitch I'll use it like that!

 

See the Pen PoPBPeK by coolfarmer (@coolfarmer) on CodePen

 

Thank for your time!

[ZachSaucier]

Using a named function can help clean up your code a bit. Also using === is more safe.

var tl = gsap.timeline({ paused: true, reversed: true });
tl.to("#rect", { duration: 1, fillOpacity: 1, scale: 1.3});

function toggleTimeline() {
  if (!tl.isActive()) {
    tl.reversed() ? tl.play() : tl.reverse();
  }
}

document.getElementById("rect").addEventListener("click", toggleTimeline);
document.getElementById("btn").addEventListener("click", toggleTimeline);

document.getElementById("rect").addEventListener("mouseenter", function() {
  if (gsap.getProperty("rect", "scale") === 1) {
    gsap.set("rect", { fillOpacity: 1 });
  }
});

document.getElementById("rect").addEventListener("mouseleave", function() {
  if (gsap.getProperty("rect", "scale") === 1) {
    gsap.set("rect", { fillOpacity: 0.4 });
  }
});