Hover only fires once

[celli]

There are two very simple things I am trying to do, but I am having trouble:

 

1. I am trying to get each of these boxes to use the same hover state in the codePen example, but it only seems to work the first time I hover over any of the boxes. When I reload I can hover again.

 

2. I was going to use the same SVG markup in my HTML for each hover box, but there must be a better way to only write the SVG HTML code once, and position it each time over every .workBox. I tried cloning it and appending it with jQuery, but it wasn't working exactly, and I am wondering the best way to do that if there would be 20 or more boxes.

See the Pen xwegXv by celli (@celli) on CodePen

[PointC]

Hi celli,

 

I made a couple of changes to your Pen and have the hovers working. I'm not 100% sure why the Timeline wouldn't reverse on hover out, but the super smart mods will certainly explain that to both of us.

 

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

[PointC]

I'm an idiot - I didn't have the tl variable in the global scope when I first forked your pen. 

 

It works now with the timeline reverse:

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

 

I think I have the answer from your original pen problem too - when your timeline reversed some elements went to AutoAlpha 0 (opacity:0 and hidden) so when the next hover timeline played, the autoAlpha is a .from autoAlpha: 0 and the autoAlpha was already at 0 from the reverse timeline so it went from 0 to 0.

 

Carl's great video also explains this (about 4:30 is the .from tween behavior): 

[OSUblake]

If you were trying to clone an SVG element with jQuery, that won't work. 

 

And your hover function keeps adding to the timeline every time you hover over a box.

 

See the Pen Lpvyzg?editors=001 by osublake (@osublake) on CodePen

[OSUblake]

PointC, there's one problem with what you did. Try to get a couple of the boxes to play at the same time, by hovering back and forth. You might overwrite a tween before it's finished, leaving you with a stuck animation.

[PointC]

Ahhh... I see that now. That makes sense.

 

Question - on my second solution, was that also adding to the timeline on each hover or was it completely erasing the active timeline since I was using the same var for a new TimelineMax thus resulting in a possible stuck animation? I just want to make sure this concept is cemented in my brain.

[celli]

Thanks PointC and OSUblake.

[OSUblake]

The reason for the stuck animation is actually what you discovered in your post with the video, those darn from tweens. So if you create a tween that overwrites a previous one before it finishes, its now going to animate to whatever that property might be at that time. So animating autoAlpha from 0 and then overwriting it when it's at 0.5 will make that tween only animate from 0 to 0.5. Keep doing that and that range gets smaller and smaller.

 

In your example creating a new timeline on each hover wasn't adding to the previous one, but it also wasn't erasing the previous timeline. Another confusing concept can be understanding how references and objects work. So if you create a simple object like this...

var myObject = { foo: "bar" };

Your variable is just storing a reference to that object, kind of like its address. If you create another variable and then set the first one to null, that same object still exists. 

var myObject = { foo: "bar" };
var someObject = myObject;

myObject = null; 

Long story short, as long as there is a reference to an object it doesn't get erased. So even though you created a new timeline, the GSAP engine still had a reference to that timeline, and thus it never stopped running.

[PointC]

o.k. - I think I've got it. 

 

This is one area where I struggle a bit wrapping my brain around it - when a Timeline exists, gets overwritten, is stopped, killed etc...

 

This was very helpful as I'm working on a menu right now with a series of divs with the same class and creating a hover event for each. In my project I was using a different animation for the over and the out rather than a reverse timeline so it wasn't getting stuck, but in re-looking at it now, it wasn't working correctly either. Your CodePen was a great example of how this should be done. 

 

Thanks so much - lesson learned for today.

[PointC]

... and - yes - the from tweens can definitely trip you up if you're not paying attention. I seem to always use a .set() and then a .to() so I don't confuse myself any more than I already am.    

 

Thanks again for the lesson Blake. 

[OSUblake]

I like using set() and to() also. It's pretty foolproof. But I completely understand the difficulty in understanding from tweens. It took me awhile to wrap my brain around how they worked and what immediateRender does. But don't worry, because one day you're going to have an "aha!" moment and everything is going to become super obvious. 

[PointC]

if you don't mind answering one final question about this - 

 

I think the part that trips me up most is, as you said above, the GSAP engine retains a reference to the tween. Since that is the case, why doesn't it finish the animation of that timeline even though we quickly hovered over another element and started a new Timeline?   

[Jonathan]

Hello celli,

 

Adding to these fine Gentlemen's great advice.. here is my measly two cents

 

To add a timeline for each element without creating multiple instances and new timelines on each hover. You create one timeline reference  and store each timeline in the elements JavaScript DOM node on load. This way your not creating  a new tween or timeline on each hover which can be wasteful. One timeline instance to rule each element

 

Basic concept like this:

 

See the Pen KdYqWo by jonathan (@jonathan) on CodePen

See the Pen KdYqWo by jonathan (@jonathan) on CodePen

 

// set some global properties
TweenMax.set(".item", {willChange:"auto", transformOrigin:"50% 50%"});

// loop through the elements
$(".item").each(function(i, el) {
  
  // set some individual properties
  TweenMax.set(el, {borderRadius:0});
  
  // create a timeline for this element
  var tl = new TimelineMax({paused: true});

  // create your tween of the timeline in a variable
  var t = tl
          .set(el,{willChange:"transform"})
          .to(el, 0.4, {x:25, borderRadius:15, ease:Power1.easeInOut});

  // store the tween in the JavaScript DOM node
  el.animation = t;

  // create the hover event handler
  $(el).on("mouseenter",function(){
        this.animation.play();
  }).on("mouseleave",function(){
        this.animation.reverse();
  });
  
});

x

Now applying that same principle to your codepen from above, it would become the following:

 

See the Pen yYrXeK by jonathan (@jonathan) on CodePen

 

// set some global properties
TweenMax.set([".squareBox, .verticleLine, .horizLine "], {willChange:"auto", transformOrigin: "center center", scale:.2, autoAlpha:0})

// loop through each element
$(".workBox").each(function(i, el) {
 
  // create a timeline for this element
  var tl = new TimelineMax({paused: true});

  // create your tween of the timeline in a variable
  var t = tl
          .set(el,{willChange:"transform,opacity"})
          .to($(el).find(".squareBox"), .75, {transformOrigin: "center center", scale:1, autoAlpha:1, ease:Expo.easeInOut})
          .to($(el).find(".verticleLine"), .5, {transformOrigin: "center center", scale:1, rotation:-90, autoAlpha:1, ease:Back.easeOut}, "-=.5")
          .to($(el).find(".horizLine"), .5, {transformOrigin: "center center", scale:1, rotation:90, autoAlpha:1, ease:Back.easeOut}, "-=.35");

  // store the tween timeline in the JavaScript DOM node
  el.animation = t;

  // create the hover event handler
  $(el).on("mouseenter",function(){
      this.animation.play();
  }).on("mouseleave",function(){
      this.animation.reverse();
  });
 
});

x

And then go grab a pizza!

 

[OSUblake]

@PointC Oh there still running, but when you hover back and forth it's overwriting the existing tween for those properties. One property that is not getting overwritten are the callbacks. Check out the console. It's still logging out stuff even if you don't see anything happening.

 

See the Pen vNMZzy?editors=001 by osublake (@osublake) on CodePen

 

 

 

And then go grab a pizza!

 

 

Yea!!! Jonathan's buying.

[celli]

Amazing contributions from all who added comments here, thank you so much!!

This, once again, expanded my knowledge in a BIG way... now it's off to experiment and put it all into practice