Multiple Icons with hover

[phillip_vale 1 Likes (Newbie)]

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

[CraigWheatley 49 Likes (Newbie)]

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

[PointC 8,599 Likes (Superhero)]

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.

[phillip_vale 1 Likes (Newbie)]

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

[PointC 8,599 Likes (Superhero)]

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.