The UI Animation Newsletter
vol 18.24 • July 6, 2018 • Twitter / Subscribe / Archives 

Happy Friday! 

I often get questions about animating SVG lettering in my workshops. Animating SVG strokes can be pretty straight forward, but nice looking letters are rarely just strokes. The animating calligraphy article below has lots of handy tricks for exactly that. Check it out if you’ve been wondering about animating lettering or other irregular shapes.

If fancy slide-show transitions are more your style, there’s a triple panel reveal demo below for you too.

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.



Hassyadai #dzy

I have to admit, I don’t totally understand what this site is all about, but time-travel style page transitions and spacey geometric shape animations make a lasting impression. The rainbow fog effect isn’t bad either.

A shiny 500

500 Thank You
Liam Egan celebrates his 500th follower with this shiny yet gritty interactive demo.

Lovely rotating 3d shapes by Dave DeSandro made with canvas (and no WebGL or Three.js). It’s very interesting to note how different the 3d effect is when they’re animated vs when they are still. 

the moon in CSS

Real Time Moon
This might be the slowest CSS animation ever to be created. Burke Holland’s CSS animated moon that moves at the speed of, well, the moon.

Chat pop up concept
A smooth and liquidy chat popup concept by Minh Pham. Very slick!


Animate Calligraphy with SVG
Animating SVG strokes is fairly straight forward, but animating calligraphy (or even lettering) can get tricky because the strokes that make up the letters are actually closed paths. Claus Colloseus demonstrates some clever masking techniques to create "drawing" animations for fancy letters. If you like lettering, this one is a great trick to have up your sleeve!

Triple Panel Reveal Slideshow #dzy
A fullscreen image slideshow with lateral image previews and a reveal animation using TweenMax. This effect mixes different planes of motion to give it more complexity and depth.

Web Animations in WebKit
Safari Tech Preview 59 will have Web Animations on by default. (Previously you had to turn them on manually.) This blog post also has a short and sweet explanation of what you might use the WAAPI for.


The layouts of tomorrow
Max Böck covers the Digital Walls demo in more detail showing how all the pieces, like animation, came together for the final results.


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

FullStack London
July 11-13, 2018

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.