Jump to content
GreenSock

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

Multiple Icons with hover

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

You've currently got one timeline animating all the classes for each icon - you need to split them out.

 

There's probably cleaner ways to do this but here's a quick fix:

 

See the Pen qNOvbJ?editors=1010 by craigster1991 (@craigster1991) on CodePen

  • Like 1
Link to comment
Share on other sites

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.
×