Jump to content
GreenSock

phillip_vale

Multiple Icons with hover

Go to solution Solved by PointC,

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

Hi,

 

I am having a problem animating multiple icons with all of them hovering at once.

 

I have tried each() etc. but can't seem to crack it. Ideally I would like to have it that on hover the timeline iconHover plays and then reverses when the mouse is taken off.

 

Any help would be much appreciated,

 

Phil

See the Pen 1cf2bfa4959c1d552a02f9b101173d98 by phillip_vale (@phillip_vale) on CodePen

Link to comment
Share on other sites

  • Solution

Hi phillip_vale  :)

 

You're on the right track with jQuery each(). This will create a separate timeline for each of the icons that can easily play/reverse on hover. 

 
$(".icon").each(function(i, element) {
var tl = new TimelineMax({paused:true, reversed:true}),
   desc = $(this).find(".desc"),
   graphic = $(this).find(".graphic"),
   shadow = $(this).find(".shadow");

tl.from(desc, 0.5, {ease:Power2.easeInOut,  autoAlpha: 0}, "hover")
tl.to(graphic, 0.5, {ease:Power2.easeInOut, y: 10}, "hover")
tl.from(shadow, 0.5, {ease:Power2.easeInOut, scale: 0, autoAlpha: 0, transformOrigin: "center"}, "hover");  

$(element).hover(makeItWork, makeItWork)

function makeItWork() {  
tl.reversed() ? tl.play(): tl.reverse();
}

}); 

In this solution, we use the same function on hover over/out and either play or reverse the timeline depending on its current state. Here's a fork of your pen with the solution I've listed above.

 

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

 

Hopefully that helps.

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

Hi CraigWheatley and Point C,

 

Thanks for your input! I'm going to stick with the jquery method because I have about 16 icons all up!

 

Point C thanks for you help, just one thing do you think you could explain what the (function(i, element) means? The rest i can sort of understand but i don't see what the i after the function does.

 

Thanks,

 

Phil

Link to comment
Share on other sites

The 'i' is the index of that element. You can use 'i' or 'index' or almost anything you like really, but most of the time you'll see those two. The 'element' is the DOM element that is part of the jQuery object. It's what 'this' will be referring to. We don't actually need them to make this work. You could change the code slightly and get the same result:

// change line 1 to this
$(".icon").each(function() {
// change line 11 to this
$(this).hover(makeItWork, makeItWork)

Here's some good info that will explain it in detail:

 

https://api.jquery.com/each/

 

Hopefully that helps.

 

Happy tweening.

:)

  • Like 2
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.
×