Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Semblance

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

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

:)

  • Like 5
Link to comment
Share on other sites

Hello @PointC 8-)

 

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!

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×