Post

Some CSS animation fun to wrap up my final Friday "creative time" session of 2024. A jump and a flip and a wobble: codepen.io/hexagoncircl...

28/12/24, 12:45 am6 reposts45 likes

Matthias Martin

@handle.invalid

29 Dec 2024

Reminds me of the Easter egg I added to easingwizard.com You can trigger it by clicking on the preview element.

easingwizard.comEasing Wizard - CSS Easing EditorGenerate and customize CSS easing functions with ease and magical precision using Easing Wizard 🧙

Colum Kelly

@columk.bsky.social

28 Dec 2024

I always found it curious that most of the principles of animation were missing from the web. These are learned on day one of an animation degree. Yours is a great example of how a little anticipation can make a huge difference.

Matthias Martin

@handle.invalid

29 Dec 2024

And the width/height transformation as well. I studied design and we learned the principles too.

Colum Kelly

@columk.bsky.social

29 Dec 2024

Yep, squash and stretch.

Andy Stewart

@andystew.art

28 Dec 2024

TIL that you can define an easing curve inside of a key frame block. Very cool.

Rob Balfré

@robertbalfre.dev

28 Dec 2024

Oh that is delightful. Permission to copy for every future project I work on please 😄

Robert Lin

@robertl.in

28 Dec 2024

Instant follow! TY for sharing-- this is so good!! 👏