Animation not triggering after multiple hover in and out?

[Vincentccw 3 Likes (Newbie)]

I not sure this is the right way to do it or not, basically what I want to do is when hover over the div, the paragraph will move down and the title will turn green with class added to it.

 

then when hover out the exact reverse will occur.

 

My problem now is that when I hover over and out multiple times swiftly and land my cursor within the div, the mouseenter animation will not trigger, but when I move my cursor out again and move back in then it will back to normal...

 

What seem to be the problem actually? 

 

 

Here is my code:

See the Pen rpIgD by vincentccw (@vincentccw) on CodePen

[Jonathan 5,176 Likes (Superhero)]

when i went to your pen it was not even working.. so im not sure exactly how it is supposed to behave but...

 

I removed the BODY tag from the HTML part since the body tag is already part of the codepen. And i moved your revert and turnGreen functions outside of the event handler.

 

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

 

how is this .. ?

[Vincentccw 3 Likes (Newbie)]

when i went to your pen it was not even working.. so im not sure exactly how it is supposed to behave but...

 

I removed the BODY tag from the HTML part since the body tag is already part of the codepen. And i moved your revert and turnGreen functions outside of the event handler.

 

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

 

how is this .. ?

Hmmm I just realize when view in chrome it works but not in firefox, thanks for the solution that is exactyly what I mean, Apart from putting using $this on both the hover in and out and placing both function outside the hovers, I saw that you use turnGreen($this) and revert($this)...Why do you need call the function again? Aren't the callback functions already done the job?

[Jonathan 5,176 Likes (Superhero)]

cool.. basically im passing the $this variable which represents the current element being hovered over or out.. and pass that as a parameter to through the function. So the function can utilize the $this variable.

 

If i didnt pass the $this variable i would have to first declare it outside the scope of the mouseenter and mouseleave event handlers so they can be used in a global scope and context

 

technically you woudlnt need those functions to be outside the mouseenter and mouseleave anonymous functions if they are only being run for those 2 events

 

you could also do this without those functions if they only run for mouseeneter and mouseleave, and have there inside "do stuff code" inside the events:

 

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

[Vincentccw 3 Likes (Newbie)]

cool.. basically im passing the $this variable which represents the current element being hovered over or out.. and pass that as a parameter to through the function. So the function can utilize the $this variable.

 

If i didnt pass the $this variable i would have to first declare it outside the scope of the mouseenter and mouseleave event handlers so they can be used in a global scope and context

 

technically you woudlnt need those functions to be outside the mouseenter and mouseleave anonymous functions if they are only being run for those 2 events

 

you could also do this without those functions if they only run for mouseeneter and mouseleave, and have there inside "do stuff code" inside the events:

 

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

Thanks for the explanation, unfortunately I need my function to be outside the hovers....

I also notice that I want I want the "toGreen" class to be added after the marginTop:100 animation complete, but I cant seem to do it in my case

 

I have updated my code here:

See the Pen LJiso by vincentccw (@vincentccw) on CodePen

[Jonathan 5,176 Likes (Superhero)]

how about this.

 

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

 

you will use the onCompleteParams to pass the $this variable to your function in the onComplete callback

 

for example:

var mainTweenSlideDown= new TimelineLite({
      paused:true,
      onCompleteParams:[$this], // pass $this to the turnGreen onComplete  callback function
      onComplete:turnGreen
});

• onComplete: Function - A function that should be called when the tween has completed
• onCompleteParams: Array - An Array of parameters to pass the onComplete function.
  For example, TweenLite.to(element, 1, {left:"100px", onComplete:myFunction, onCompleteParams:[element, "param2"]}); To self-reference the tween instance itself in one of the parameters, use "{self}", like: onCompleteParams:["{self}", "param2"]

found in the GSAP DOCS:

 

http://api.greensock.com/js/com/greensock/TimelineLite.html

 

[Vincentccw 3 Likes (Newbie)]

how about this.

 

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

 

you will use the onCompleteParams to pass the $this variable to your function in the onComplete callback

 

for example:

var mainTweenSlideDown= new TimelineLite({
      paused:true,
      onCompleteParams:[$this], // pass $this to the turnGreen onComplete  callback function
      onComplete:turnGreen
});

• onComplete: Function - A function that should be called when the tween has completed
• onCompleteParams: Array - An Array of parameters to pass the onComplete function.

  For example, TweenLite.to(element, 1, {left:"100px", onComplete:myFunction, onCompleteParams:[element, "param2"]}); To self-reference the tween instance itself in one of the parameters, use "{self}", like: onCompleteParams:["{self}", "param2"]

found in the GSAP DOCS:

 

http://api.greensock.com/js/com/greensock/TimelineLite.html

 

Thanks onCompleteParams seem to solve the problem,but the problem I mention in the beginning seem to occur again, that is when you hover in and out very quickly for few  times and stop inside the div, the "mouseenter" stop working... I guess that's limitation of the plugin lol...    

[Jonathan 5,176 Likes (Superhero)]

GSAP will run fine.. try going here again..

 

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

 

i basically commented out the if statement checking if the element had the animationRunning class.. so now that it is commented out you can keep hovering in and out and GSAP will animate based on the events

[Vincentccw 3 Likes (Newbie)]

GSAP will run fine.. try going here again..

 

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

 

i basically commented out the if statement checking if the element had the animationRunning class.. so now that it is commented out you can keep hovering in and out and GSAP will animate based on the events

 I never thought it would be possible, thanks for the help so far, really appreciate it!