UI Animation Newsletter 20.07 - Header page transitions 👀 executing UX animations 📓 UI animations round up ✨

vol 20.07 • Feb 14, 2020 • Twitter / Subscribe / Archives

Happy Friday! We’ve got a great mix of quirky, stylish, and practical tips in today’s issue. This week’s feature UI animation and the header page transition demo are most definitely stylish. The tilt toggle and copy/cut/paste links are the perfect amount of quirky. While the flip card tutorials and NNG article provide lots of practical tips. I love it when we have a great mix like this!

Also, if you’re thinking about attending An Event Apart DC this spring, I’ve got a discount code for you below (AEAHEAD can get you $100 off). It’s the first AEA of the year and I’m really excited about the brand new talk I’m writing for it!

Until next week,

- Val

p.s. Replies go straight to my email, and I read them all. Reply and let me know what animation things you’re working on.

UI ANIMATION OF THE WEEK

Alessandra Zanghi Studio

I love how the soft colour palette and the softly morphing abstract shapes work together on this site. It definitely creates a unique mood and draws you in. The shape and type animation on each page transition is the highlight for me.

LINKS

Tilt toggle
A colourful toggle with a bit more physics than usual from Chris Gannon. It makes for a satisfying interaction!

Header on page transition
A very stylish header text animation on page transition by Paulina Hetman. The animated dotted lines add a bit of interest to the layout too.

Cut/copy/paste
An interesting take on a floating cut/copy/paste menu. Be careful reading the text though, it might get a song stuck in your head.

Newton's lightbulbs
Mesmerizing and nearly realistic animation of Newton's cradle made with GSAP and SVG.

Executing UX Animations: Duration and Motion Characteristics
Another installment examining UX animation from the Nielsen Norman Group. (They even list my book as one of their references which is pretty neat.)

UI interactions and animations roundup #3
Another installment of my favourite Codrops round up. Lots of fun examples in this one.

Magic flip cards
A detailed tutorial from Dan Halliday on creating interactive cards that flip and solving a common sizing problem that comes up with this pattern.

UPCOMING EVENTS

Just one conference left for me to wrap up this year! If you’ll be there too, come say hi!

An Event Apart DC
April 13-15

An Event Apart Seattle
May 11-13

Pixel Pioneers
June 12

I'll be speaking at AEA DC this April!
Get $100 off your multi-day ticket with the code "AEAHEAD"

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