<https://greensock.com/forums/topic/16222-button-each-hover-animates-every-element/>
<http://schema.org/text>
"Hi there, \n  \nI am trying to make some fancy hover action on my buttons. At the moment I have two buttons side by side and the animation already works as intended. Neverthless I have the problem that once I hover one button the other button animates aswell. I would like just to animate the button, which the user hovers. Could you check my code below, which is orienated on this topic (https://greensock.com/forums/topic/13384-timelines-are-objects-or-values/) and tell me where I am wrong? \n\n(function($){\n\n var button = $('.irp_button'),\n    a = $('.inner1'),\n    b = $('.inner2'),\n    c = $('.inner3'),\n    d = $('.inner4'),\n    e = $('.inner5'),\n    m = 0,\n    n = 50,\n    o = \"center\",\n    p = null;\n\n// loop through element\nbutton.each(function(i, el) {\n\n  \n  // create timeline for this element in paused state\n  var tl = new TimelineMax({paused: true});\n\n  // My Timeline - create tween of the timeline in a variable\n  var t = tl\n            .set(el,{willChange:\"transform\"})\n            .set(c, {width: 200,right: 500})\n            .set([e, d], {opacity: 0,width: 1,right: \"center\" === o ? -n / 2 : -n - 20})\n            .set(e, {rotationZ: \"45deg\"})\n            .set(d, {rotationZ: \"-45deg\"})\n            .to(a, .2, {opacity: 0,left: 15,ease: Sine.easeIn})\n            .to(c, .3, {right: \"center\" === o ? -n / 2 : -n - 20,ease: Expo.easeOut}, .1)\n            .to(c, .5, {width: n,ease: Expo.easeOut}, .3)\n            .to([e, d], .2, {opacity: 1,ease: Sine.easeOut}, .35)\n            .to(e, .3, {width: 8,ease: Quart.easeOut,transformOrigin: \"100% 50%\"}, .45)\n            .to(d, .3, {width: 8,ease: Quart.easeOut,transformOrigin: \"100% 50%\"}, .45)\n    // to right animation            \n    tl.addLabel(\"midpoint\", .8),\n            tl.add(function() {\n                tl.stop()\n            }, \"midpoint\"),\n                tl.set(a, {left: -15}, \"midpoint0.31\"),\n                tl.to([c, d, e], .3, {right: -600,ease: Expo.easeIn}, \"midpoint0.31\"),\n                tl.to(a, .3, {opacity: 1,ease: Sine.easeOut}, \"midpoint0.5\"),\n                tl.to(a, .3, {left: 0,ease: Sine.easeOut}, \"midpoint0.5\"),\n                tl.stop();\n\n  // store the tween timeline in the javascript DOM node\n  //el.animation = t;\n  $(el).data('someTimeline', t);\n\n  //create the event handler\n  $(el).on(\"mouseenter\",function(){\n    //this.animation.play();\n    null !== tl &amp;&amp; (tl.seek(0),\n                $(this).data('someTimeline').play())\n  }).on(\"mouseleave\",function(){\n    //this.animation.reverse();\n    null !== tl &amp;&amp; (tl.time() &gt;= tl.getLabelTime(\"midpoint\") ? tl.play() : tl.reverse())\n    \n  });\n  \n});\n\n})(jQuery);\n\nThanks in advance  \n"
<https://greensock.com/forums/topic/16222-button-each-hover-animates-every-element/?tab=comments#comment-71383>