Share Posted February 2, 2015 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 More sharing options...
Share Posted February 2, 2015 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/ 1 Link to comment Share on other sites More sharing options...
Author Share Posted February 2, 2015 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 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now