Copy
The UI Animation Newsletter
vol 18.25 • July 13, 2018 • Twitter / Subscribe / Archives 

Happy Friday! I just finished up a keynote at FullStack London this morning. It was a fun crew to talk web animation tools with and it’s always nice to visit this city.

This week’s issue has a clever 3d flip menu, scroll-triggered SVG morphs, some really impressive animated transitions and more. Enjoy!

Until next week,

- Val

p.s. Replies go straight to my email and I read them all. I’d love to hear about what you’re working on.

 

UI ANIMATION OF THE WEEK

Die Antwort agency site

There are lots of black and white morphing animations in this site. The way they so smoothly transition from the opening video to the interactive logo is very nicely done. The cursor-following dots make for a unique, yet unobtrusive, interaction pattern too.

INSPIRATION
bendy SVG scrolling animation

Bendy drinks menu
A fluid and bendy-scrolling drinks menu SVG animation from Chris Gannon. It's based on Sergey Valiukh's Restaurant Menu Dribbble post which is also pretty darn cool.

multi-level 3d flip

3d flip menu
Love the added depth of the guitar in this 3D menu effect by Minh Pham.

dramatic cutting of your to-do list

Slice list items
A fun way to cross things off your to-do list with SVG and CSS animation by Aaron Iker.

wonderfully animated explainer video

Keplertek | AI & Robotics Ecosystem animation
The scene transitions and perspective changes in this animation are really great. I love it when seemingly simple shapes and colours can build up to complex effects.

LEARNING

CSS transitions 101: let’s animate a toggle button icon
A helpful tutorial on animating a toggle button with CSS by Maria Antonietta Perna. She includes a detailed breakdown of the various CSS transition properties too.

 

Phenomenon WebGL library
A fast 2kB low-level WebGL API. GPU based with shaders by Colin van Eenige. He even has a nice collection of examples too.

 

Spaghetti Audio
An addictive audio synthesizing demo by Joe Harry that uses path animations to give you feedback about the notes you're creating.

Clock shop
A neat collection of different variations on code-based animated clocks.

UPCOMING EVENTS:

I’ll be at these conferences in the next few months. If you’re at one of them too, come say hi! 

Smashing web animation webinar
July 24, 2018


Animation in Design Systems workshop
UX Week, August 22, 2018

AEA Chicago
Aug 27 - 29, 2018

 

Support the UI Animation Newsletter: 
Submit a link for a future issue  or  Share it with a friend

Copyright © 2018


You can update your preferences or unsubscribe from this list here.