Problems in hover animations in elements

[inGrooVe 2 Likes (Newbie)]

Hi there!
 
I´ve a problem when animate elements in a timeline, fired by hover event for example.
 
The problem is that when i hover the element, the timeline start, but when you hover and quick go away the mouse, the animation stacks, sometimes left the text visible ( it should fade out ), it looks weird.

Animation is sequenced incorrectly, and elements are half way rather than stop the animation and play the animation that fires the callback of "hover", sure i´m doing something wrong.

 

With css3 animations this won´t happens.

 

Maybe it´s because i´m using "fromTo"and animation it´s not completed when I remove the mouse over the element.

 

This is the example:

 

http://www.seba.adestudio.com/playadelsol/galeria.html

 

Any idea how to fix this? Using last version of TweenMax

Thank You!

 

Sebastián.

$(".proyectoList").hover(function(){
			var actual = $(this);
			var overlay = $(actual).find(".overlayProItem");
			var nombre = $(actual).find(".nombreProyecto");
			var boton = $(actual).find(".linkProyecto");
			var imagen = $(actual).find("img");
           
			
			var tl = new TimelineLite();
			tl.to(imagen, .5, {scale:1.3, autoAlpha: .7, ease:Power2.easeInOut})
          .fromTo(overlay, .3, {scale:.6, autoAlpha: 0, display: "none"},{scale:1, autoAlpha: 1, display: "block",  ease:Power2.easeInOut}, "-=0.5")
          .fromTo(nombre, .3, {scale:.6, autoAlpha: 0, display: "none"},{scale:1, autoAlpha: 1, display: "block",  ease:Power2.easeInOut}, "-=0.1")
          .fromTo(boton, .3, {scale:.6, autoAlpha: 0, display: "none"},{scale:1, autoAlpha: 1, display: "block",  ease:Power2.easeInOut}, "-=0.1");
		  
		
		}, function(){
			var actual = $(this);
			var overlay = $(actual).find(".overlayProItem");
			var nombre = $(actual).find(".nombreProyecto");
			var boton = $(actual).find(".linkProyecto");
			var imagen = $(actual).find("img");
           
			
			var tl = new TimelineLite();
			tl.to(nombre, .3, {autoAlpha: 0, display: "none", ease:Power2.easeInOut})
          .to(boton, .3, {autoAlpha: 0, display: "none", ease:Power2.easeInOut}, "0")
          .to(imagen, .3, {scale: 1, autoAlpha: 1, ease:Power2.easeInOut}, "0")
          .to(overlay, .3, {autoAlpha: 0, display: "none", ease:Power2.easeInOut}, "0");
          });

This is the element html structure:

<!--inicia-->
    <a class="proyectoList venobox" data-gall="myGallery"  href="images/big8.jpg">
      <div class="overlayProItem"></div>
        <div class="nombreProyecto">Título de la Imagen</div>
        <span class="linkProyecto">Ver Imagen</span>
      <img src="images/thumb3.jpg" width="300" height="250"  alt=""/> 
      </a>
    <!--fin-->

And the css:

.proyectoList {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
    float: left;
    width: 300px;
    margin: 10px;
    position: relative;
    height: 250px;
    overflow-y: hidden;
    overflow-x: hidden;
    display: block;
}
.proyectoList .overlayProItem {
    background-color: rgba(0,0,0,.65);
    width: 300px;
    height: 250px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 9;
    opacity: 0;
    cursor: pointer;
    display: none;
}
.nombreProyecto {
    color: #FFFFFF;
    display: none;
    font-size: 30px;
    font-weight: 300;
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 1.1em;
    word-spacing: -1px;
    bottom: 89px;
    opacity: 0;
    z-index: 991;
}
.linkProyecto {
    color: #7FD2F5;
    display: none;
    font-size: 13px;
    font-weight: 500;
    position: absolute;
    text-align: center;
    bottom: 52px;
    text-decoration: none;
    word-spacing: 4px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 0px;
    width: 100%;
    z-index: 991;
    opacity: 0;
}

[Diaco 1,948 Likes (Superhero)]

Hi inGrooVe

 

pls try this :

$(".proyectoList").each(function(index, element){
  var tl = new TimelineLite({paused:true});
  // add your timeline tweens here
  //.....
  //....
  element.animation = tl;
});
$(".proyectoList").hover(over, out);
function over(){ this.animation.play() };
function out(){ this.animation.reverse() };

and for next time pls make a reduced Codepen Demo ( or another online code editor) available :

 

Read This First: How to Create a CodePen Demo : http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

[inGrooVe 2 Likes (Newbie)]

Hi Diaco, thanks for your replay, that was quick!

 

Your solution works like a charm! I´m not a skilled developer, but I notice it was a different approach.

 

Let´s see if i´m right:

You define the timeline for each element, and you pause tha animation.

Then, you assined the "over" and "out" function to the hover event, and then you declare this two functions, the first play, and the second reverse the animation ( very clever ).

 

Question: what does "element.animation = tl;" ?

In the over and out function you use this. , if y have several functions and animations, can i use "this"?

 

Thank you!

 

P.D. Sorry, next time i use CodePen