Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

What's the right way to animate this hover effect?

Recommended Posts

Hi! I'm new to javascript and found gsap while trying to animate some objects.


I was trying to animate this sequence of squares to create a gallery effect but the result is very unpredictable, sometimes works all fine, but when i hover from one square to another some squares don't reverse the animation and end up in wrong positions. It's like if when i play a timeline right after another, and both timelines have animations to a certain objetc, the first timeline overrides the second and then, the objects end in the wrong position. How can i avoid this?  


Another issue i'm having is that i wanted both properties "scale" and "transform" to change the object simultaneously (i believe this way the animation would be smoother), but the way it is, the object first scales and then transforms.


Does anyone knows what am I missing?

Thanks a lot!




See the Pen GRMmwjW by gustavo-poester (@gustavo-poester) on CodePen

Link to comment
Share on other sites

Welcome to the GreenSock forums, @zinjo! And more importantly, welcome to the world of GSAP. 


I noticed quite a few problems in your demo (thanks for providing that by the way):

  1. Lots of logic issues - if you just create a whole different timeline for each item rollover, it'll create lots of conflicts. On mouseover, you're having one timeline try to control all the elements to go to one place, but then on mouseout you're having a different timeline trying to control them all to a DIFFERENT place. And what if you roll over/out quickly, when things aren't done animating? You need to code things in a more dynamic way that can accommodate picking up from anywhere. It's not the kind of thing that'd work using linear timelines like that. 
  2. Be careful about using mouseover/mouseout instead of mouseenter/mouseleave - the former fires every time your mouse goes over any child element too (much too often). 
  3. You should always set transform-related values directly through GSAP, not just in CSS. Please read: 
  4. It's always much better, faster, and more accurate to use the individual components like x, y, scale, rotationY, etc. instead of "transform".
    // BAD/SLOW:
    transform: "rotateY(-25deg)"
    // GOOD/FAST
    rotationY: -25


  5. There's no need for jQuery selectors. It's fine to do, but totally useless. GSAP uses the browser's built-in document.querySelectorAll() by default. 

Here's a much more dynamic version that uses about 75% less code too: 

See the Pen QWqvzRy?editors=0010 by GreenSock (@GreenSock) on CodePen


Is that more of what you were looking for? 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Spot on!!

Thank you so much, your anwser goes way beyong my expectations.

I see i still have a lot to learn in javascript and gsap.

Anyways, thanks again, GSAP support community is amazing.

  • Like 2
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.