Looping through list to animate one item at a time on hover

[Semblance 8 Likes (Newbie)]

Hello

 

I have a list of items, using a stagger as it load on the page (going to use it with scroll) - this is fine.

But then I am also trying to apply an animation when hovering over one item. 

 

I have it all in the CodePen. After trying a few things myself, I ended up looking at this example: 

For some reason, when I hover on one it still apply the animation on all list items. Not sure if I am selecting something wrong / missing something.

 

Any ideas?

 

Thanks in advance. 

See the Pen bWPNGo by semblance (@semblance) on CodePen

[PointC 8,599 Likes (Superhero)]

Hi @Semblance

 

Just a small correction and this will work fine for you. In your each() loop you are grabbing all the figures and h3s, but you only want the ones within the target <li>. You can make that happen by changing lines 12 & 13 to:

 

.to(($(this).find('figure')), 0.5, {scale:1.1, ease:Back.easeOut.config(3)}, 0)
.to(($(this).find('h3')), 0.5, {y:20, scale:1.1, ease:Back.easeOut.config(3)}, '-=0.5');

 

Here's a fork of your pen:

 

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

 

Hopefully that helps. Happy tweening.

[Semblance 8 Likes (Newbie)]

Hello @PointC 

 

Definitely an aaaaha moment. That makes perfectly sense. 

Completely forgot about that one, but will definitely remember to think about that from now on. 

 

Thanks again for the enlightenment! 

 

All the best!