filling from the center out

[maxshporto]

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)  

[akapowl]

 

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 547e97fc39b081a34aa7a018e5ba0110 by akapowl (@akapowl) on CodePen.

 

 

[ZachSaucier]

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  

[maxshporto]

@akapowl God blass you!TY dude!You are saved my day!
TY so much!!

[akapowl]

 

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.