Jump to content
GreenSock

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

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?
https://likely-story.co.uk/
(hover "menu" on top right)  

Share this post


Link to post
Share on other sites

 

Hey @maxshporto - welcome to the forum.

 

I think, this is a sort of effect, that can be achieved in various different approaches.

One of them could maybe look something like this

 

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

 

 

  • Like 5

Share this post


Link to post
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

Share this post


Link to post
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 VwaxmYd by akapowl (@akapowl) on CodePen

 

 

  • Like 5

Share this post


Link to post
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.

×