inGrooVe

January 5, 2016

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!

August 17, 2015

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! :-P

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.

August 17, 2015

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.

See the Pen ZGNybQ by anon (@anon) on CodePen

May 13, 2015

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.

It seems you're asking about the banner image/slideshow transitions. This would be quite a simple setup. I would image setting up a stack of divs, each containing an image and a few text elements (in their final positions) and then treating each "slide" as its own timeline stuffed with from() tweens ... all then stuffed into a master timeline to manage the transitions between slides and the progress bar.

I'll see if I can create an example in a little while.

May 5, 2015

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!

February 2, 2015

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

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

July 30, 2014

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.

July 30, 2014

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

Notifications

Messages

inGrooVe

Posts

Joined

Last visited

Content Type

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by inGrooVe

Is there some animation patterns for use out of the box? ( flip in x, bounce in left, etc. )

Fire elements animation on hover in each element

Fire elements animation on hover in each element

How to achieve this animation with GSAP?

How to achieve this animation with GSAP?

Problems in hover animations in elements

Problems in hover animations in elements

showing from display none

showing from display none