Jump to content


filling from the center out

Recommended Posts

i'm trying to make one interesting hover effect on mouseleave event.But after 3 days of failers i steel have't any  positive results.
Did u ever seen somesing like this?
(hover "menu" on top right)  

Link to comment
Share on other sites

Good work, Paul! There's a subtle difference in behavior in your approach and theirs: if the blue (in your case black) circle animation hasn't finished scaling up, it reverses on mouseout instead of completes the whole animation. If it has completed, then the "out" animation fires.


The Likely Story site also is using Canvas for this effect though as Paul shows it doesn't have to be in Canvas :) 

  • Thanks 1
Link to comment
Share on other sites


I played around with it a bit more to make it more responsive to the different 'states', when entering/leaving.


Ended up with this one-timeline solution - but what I'm doing there (for example getting the progress of the timeline) looks, like I might be overcomplicating things.


It works as I expected, though.


See the Pen c39909439e740f46d08e4d4945ed6b7b by akapowl (@akapowl) on CodePen



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