Animation doesn't reverse to starting point

[fionchadd]

Hi there, 

 

This is kind of a continuation of my previous post here -

  except now I have a different problem so I'm starting a different thread, I hope that's ok! 

 

I'm trying to redo the pen in my previous thread to use a single timeline which plays on mousein/focusin and reverses on mouseout/focusout, rather than having two separate timelines. 

I found an example by Blake in this thread: 

 which I know is an old thread but the method seemed sound still? So I've used that method in the codepen I linked above. 

 

The problem I'm having is that the animation doesn't always reverse to its starting position, and I'm not really sure why. If you hover over different items for a while, sometimes when you hover-off the titles stay white, or go back to their starting colour but stay at 0.16 opacity. 

 

Originally I was changing the background colour of the body rather than fading in/out the overlays, and the colour would get stuck between the values - i switched to using different overlays instead which seems to have solved that problem, but I'm still struggling with the text colour/opacity. 

 

Is anyone able to identify why this is happening? 

 

Thank-you! 

Hannah

See the Pen 823258df262a67091e1ff841966b4098 by fionchadd (@fionchadd) on CodePen

[Rodrigo]

Hi,

 

I tried to follow the logic of the example you posted but I was confused and IMHO I think you are over-complicating things a bit.

 

This seems to be a more simpler and bullet proof approach:

See the Pen vYrQNVy by GreenSock (@GreenSock) on CodePen

 

Granted that there are a few things missing in terms of some extra text color, opacity and background of the link element, but as you can see that approach works without any issues when it comes to quick mouse enter/leave events.

 

Hopefully this helps. Let us know if you have more questions.

 

Happy Tweening!

[fionchadd]

Hi Rodrigo, 

 

Ahh amazing, thank-you for this! I definitely have a tendency to overcomplicate things unnecessarily

This is great, thank-you so much. I pulled it into another pen and tried adding the additional elements, and realised that the issue is coming from trying to fade out the items that aren't being hovered. In this pen, for example, I've based it on your code but the issue in my previous pen is once again apparent: 

See the Pen 438c486d2b953de9d2b7b63b31f04842 by fionchadd (@fionchadd) on CodePen

 

 

But I've narrowed down the problem which is great! I think there's a conflict between me saying "set all spans to be 0.16 opacity" and "set this span to be 1 opacity" at the same time and that's what's making it confused. This is the only line I've added to the code:      

.to("span", { color: "#ffffff", opacity: 0.16, }, "<")

 

Is there a way to target the "span" elements that don't belong to the "artist" element that's been hovered? Kind of like the opposite of where you've written  .to(overlays[i], { opacity: 1 })    which targets the overlay of the clicked item; I'd like to target the spans of all items *except* the hovered item. Or would I be better off toggling a class on the list on hover and fading out the other content with CSS? 

 

Thank-you so much! 

Hannah

[GreenSock]

That's more tricky. You technically have 3 different states you're animating between. Here's probably how I'd do it: 

 

See the Pen QWxJQXd?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you wanted? 

[fionchadd]

HI Jack, 

 

That's exactly what I wanted, thank-you so much! I really appreciate it  

 

Hannah