inGrooVe

Hi there, i love GSAP and use it in every project! I have a question, is there some "patterns" for common animations, like flip in x, or fade from bottom, fade and rotate In, bounce in left... you know, common animations to use right out of the box? For example, i know that this fade in from bottom: TweenMax.from(".element", 1, {autoAlpha:0, y:"50%", ease:Power2.easeOut}); Thanks guys, your are great!

Yes! and i save the code in a snippet to use, and i used it! Getting errors... but now i realize that in the snippet i have is missing the "element.animation = tl;" line... so make sense the errors i´m getting :mad: Problem solved, thanks! Advantage of the situation to ask you if there is any way or method of animating hover and out elements consistently, and with a specific animation for the hover and another animation for the out event ( not the reversed case ). Or just a recommended tutorial to watch maybe i have some concepts wrong... Thanks Diaco! Seba.

HI there! I have some anchor elements that animate on hover ( image, overlay, two span texts ), all works fine, BUT, in the codepen you will notice that if you quick hover and out the elements the animation elements are not coordinated properly and the animation is not sequenced properly. Some time ago i used a solution that apply the timeline in "each" element and then the hover fires two functions, over and out, that plays and reverse the each animation, this method works perfect ( the animations remains consistent ) but i´m getting errors to implement it. This will be my definitive way to animate on hover elements independly Can anyone help me to find the solution? This is the code i have now "working": //box home is the container element $(".boxHome").hover(function(){ var imagen = $(this).find("img"); var overlay = $(this).find(".overlay"); var texto1 = $(this).find(".textoBox"); var texto2 = $(this).find(".textoBox2"); var tl = new TimelineLite(); tl.to(imagen, 2, { scale: 1.2, ease: Power4.easeOut}) .to(overlay, .4, { bottom: 0, ease:Power3.easeInOut},".3") .to(texto1, .4, { bottom: 65, autoAlpha: 1, ease:Power2.easeOut},".5") .to(texto2, .4, { bottom: 30, autoAlpha: 1, ease:Power2.easeOut},".7"); }, function(){ var imagen = $(this).find("img"); var overlay = $(this).find(".overlay"); var texto1 = $(this).find(".textoBox"); var texto2 = $(this).find(".textoBox2"); var tl = new TimelineLite(); tl.to(texto2, .4, {autoAlpha: 0, bottom: -60, ease:Power2.easeIn}) .to(texto1, .4, {autoAlpha: 0, bottom: -60, ease:Power2.easeInOut},".2") .to(overlay, .4, { bottom: "-100%", ease:Power3.easeInOut}, ".3") .to(imagen, .7, {scale: 1, ease:Power2.easeInOut},"0"); }); Thanks! Sebastián.

Thanks you all your answers! Diacho, Shaun and Rodrigo! No, like Diaco says i was asking for the 3 boxes below the slideshow, i had problems tweening onhover items when changing its size due to the change in size of the active area of the hover, but of course creating the hover on the wrapper element and tween its internal elements is what I needed, it is simple but it helps me a lot.

I wanto to achieve this animation with GSAP, how can this be done? http://theme-fusion.com/avada/slider-revolution/ Check the "Full Responsive"," Amazing Options"... boxes. It´s a fast animation, and i would like to avoide the "hover" problems when you scale a div with the cursor hover and blink. Thank you!

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

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; }

And the solution "TweenLite.to($('#mydiv') , 0.3, {autoAlpha: 1, display:'block'});" breaks the effect first time, i guess because the "display" property is not animated.

visibility:hidden is usefull sometimes, the element is hidden BUT it´s size still affects layout. I prefer display: none;