Jump to content
Search Community

Fire elements animation on hover in each element

inGrooVe test
Moderator Tag

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

Link to comment
Share on other sites

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 :x :mad: :x  :x  :x  :x

 

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.

Link to comment
Share on other sites

  • 1 year later...

When we try to run this code, we get a and infinite loop, "Uncaught TypeError: Cannot read property 'replace' of undefined", how to make this work. Our code is the same with just added timeline. Just cannot find the error, see below, thanks!

 

 

$(document).ready(function(){
    $(".hover-bg-img").each(function(index, element){
      var tl = new TimelineMax({paused:true});
      // var elContainer = $(this).find('.hover-bg-img');
      var elBlendBox = $(this).find('.btn-hover-blurb .blend-mode-box');//
      var elTitle = $(this).find('.btn-hover-blurb h5');//
      var elBlurb = $(this).find('.hover-bg-img p');//
      var elBtn = $(this).find('.btn-hover');//
      var elBlurbBtn = $(this).find('.btn-hover-blurb .btn');//
      var elDash = $(this).find('.btn-hover-blurb .dash');//
      // var elContainerImg = $(this).find('.hover-bg-img img');

              // create tweens for timeline
              tl.to(elBtn, 0.1, { display: 'none', ease: Power2.easeOut });
              tl.from(elBlendBox, 0.25, { width: 0, ease: Power2.easeOut }, 'start');
              tl.from([elTitle, elBlurb], 0.2, { autoAlpha: 0, x: -20, ease: Power2.easeOut }, 'start+=0.3');
              tl.from(elBlurbBtn, 0.25, { autoAlpha: 0, y: 5, ease: Expo.easeInOut }, 'start+=0.4');
              tl.from(elDash, 0.25, { width: 0, ease: Expo.easeInOut }, 'start+=0.4');
      // add your timeline tweens here
      //.....
      //....
      element.animation = tl;
    });
    $(".hover-bg-img").hover(over, out);
    function over(){ this.animation.play() };
    function out(){ this.animation.reverse() };
});

 

Link to comment
Share on other sites

Got it! The issue here was this line:

 

tl.from([elTitle, elBlurb], 0.2, { autoAlpha: 0, x: -20, ease: Power2.easeOut }, 'start+=0.3');

 

I guess you cannot call multiple elements to animate on same line?

Link to comment
Share on other sites

1 hour ago, Yon said:

I guess you cannot call multiple elements to animate on same line?

 

You can. That line of code and everything else you posted appears to be valid jQuery and GSAP syntax. But valid doesn't mean it's going to be error free. You have an issue somewhere. If you need help figuring that out, you'll need to provide a demo.

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.
×
×
  • Create New...