Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
inGrooVe

Problems in hover animations in elements

Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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;
}
Link to comment
Share on other sites

  • Solution

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 Demohttp://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

  • Like 1
Link to comment
Share on other sites

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

 

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 :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×