Jump to content


Hover animation activating on load instead of hover- any ideas?

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 working with the 3d animation box shadowing effect. I am able to get the design I want however the hover effects are occuring onload instead of when the mouse is hovering over.


here is my

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


How do I make it so the green border and black background only appear when hovering? 


Note: sometimes the green pulse only occurs on hover (I would say it works) however the black background comes in permanently when it should only turn black on hover.



Link to comment
Share on other sites



Just a syntax issue. Turns out that your tween is not paused, so as soon as everything in the page is loaded the tween is created and starts playing immediately. Just add paused:true to the config object:

var t = TweenLite.to(element, time, {vars, paused:true});

Now if you're trying to get a pulsating effect you might want to look at this sample I made some time ago:


See the Pen gmkEr?editors=001 by rhernando (@rhernando) on CodePen



  • Like 1
Link to comment
Share on other sites

Thanks for the codepen the pulse animation looks a lot better now.


I still cannot get the background color to shift to black and the text color to white upon mouse enter. here is my updated

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

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.