Hover Experiments

18 Shots

A series of simple explorations that can be used as a palette for beautiful UI Animations. Made with Flow, exported to code. No fakeui, everything is real baby.

createwithflow.com/experiments/ho...

More Projects

Wilhelm (Hover Experiment #18) animation createwithflow css flow javascript js micro interactions microinteraction ui ui animation ui design uiux web animations

Wilhelm (Hover Experiment #18)

March 03, 2020

Lots of lines, and end point animations, mixed in with offset timing and multiple kinds of easing curves. Lovely. Made with Flow, and exported to code that is driving the animation on hover, via Web-Animations API and JS. No #fakeui h...

Digress (Hover Experiment #17) animation createwithflow css flow javascript js micro interactions microinteraction ui ui animations ui design uiux web animations

Digress (Hover Experiment #17)

March 03, 2020

Oh, please, do show me what YOU can do with path animations and fancy easing curves in Flow. This is just a simple experiment because I'm not as creative as you are. Made with Flow, and exported to code that is driving the animation on ...

Bismark (Hover Experiment #16) animation createwithflow css flow javascript js micro interaction micro interactions ui ui animation ui design uiux web animations

Bismark (Hover Experiment #16)

March 03, 2020

A handy technique using group layer masking and sublayer animation. Made with Flow, and exported to code that is driving the animation on hover, via Web-Animations API and JS. No #fakeui here, everything is real baby. https://createw...

Pinchot (Hover Experiment #15) animation createwithflow css flow javascript js microinteraction microinteractions ui ui animation uiux ux ui uxdesign web animations

Pinchot (Hover Experiment #15)

March 02, 2020

A tidy, simple visual effect that made me think of Bronson on a trailer, being pulled by a horse. Don't ask me why. Made with Flow, and exported to code that is driving the animation on hover, via Web-Animations API and JS. No #fakeui...

Luca (Hover Experiment #14) animation createwithflow css flow javascript js microinteraction microinteractions ui ui animation uiux ux ui waapi web animations

Luca (Hover Experiment #14)

March 02, 2020

Can you tell what's moving here, and how many shapes there are? Made with Flow, and exported to code that is driving the animation on hover, via Web-Animations API and JS. No #fakeui here, everything is real baby. https://createwith...

Bas (Hover Experiment #13) animation createwithflow css flow javascript js micro interactions microinteraction ui ui animation ux uxdesign waapi web animations

Bas (Hover Experiment #13)

March 02, 2020

There's a whole lotta layerin' goin' on here. Made with Flow, and exported to code that is driving the animation on hover, via Web-Animations API and JS. No #fakeui here, everything is real baby. https://createwithflow.com/experiment...

Kai (Hover Experiment #12) animation createwithflow css flow javascript js micro interaction microinteractions ui ui animation ux design ux ui waapi web animations

Kai (Hover Experiment #12)

February 28, 2020

Two layers of timing offset mixed in with two different easing curves. Made with Flow, and exported to code that is driving the animation on hover, via Web-Animations API and JS. No #fakeui here, everything is real baby. https://cre...

Morpheus (Hover Experiment #11) animation createwithflow css flow javascript js micro interaction microinteractions ui ui animation uiux ux uxdesign waapi web animations

Morpheus (Hover Experiment #11)

February 28, 2020

Anchor points, rotations and groups make up this effect. Sooooo morpheusy. Made with Flow, and exported to code that is driving the animation on hover, via Web-Animations API and JS. No #fakeui here, everything is real baby. https:/...