Jump to content
Search Community

How to animate only the hovered element?

gimperdaniel 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

I am probably approaching this the wrong way:

 

I have a simple, timeline that I would like to play forward on mouseenter, and then in reverse on mouseout.

var photo_zoom = new TimelineMax({paused:true});

    photo_zoom.to(WHAT GOES HERE??,1, {scale:1.2});

    $(".each-photo").hover(function(){

        photo_zoom.play();

    },function(){

        photo_zoom.reverse();

    });

Assuming that there's more than one element with class .each-photo, how do I pass the hovered element, to the timeline? Do I need to wrap whole timeline inside a function? Is there a way to pass parameters via play() and reverse()?

Link to comment
Share on other sites

  • Solution

Hi gimperdaniel  :)

 

pls try something like this :

 

$(".each-photo").each(function(index, element){
   var tl = new TimelineMax({paused:true});
   // your timeline tweens should be here ...
   element.animation = tl;
})

$(".each-photo").hover(over, out);
function over(){   this.animation.play()   };
function out(){   this.animation.reverse()   };
  • Like 3
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...