Guest editor on WAAPI + tutorials & resources | View in your browser
The UI Animation Newsletter

Our first guest editor issue! Dan Wilson joins me this week with a look at the Web Animation API and the future:

Experimenting with what’s next

Every once in a while I like to stop and think about what we have as makers on the web, mobile, and beyond. Even five years ago CSS transitions were considered a nice progressive enhancement, but not something you could use reliably. Keyframe animations were even less available. Today they are essentially everywhere. If you played with them early you got a head start once the world deemed them safe to use.

My personal favorite out of the growing list of animation tools available is the Web Animations API. In its simplest description, the API gives JavaScript access to the same engine that powers CSS animations/transitions and adds playback controls. When I mention how exciting this is to me, many people then ask me why to bother with something that is currently only in three browsers (Firefox, Chrome, and Opera).

The core functionality is supported in the majority of major browsers, and it is on track to be in all of them. Microsoft has it on their backlog. Even secretive Apple has recently revealed they are working on their implementation. So the support is out there and you can use an official polyfill when you need wider support. Even if you are not ready to use it in the “real” world, I suggest at least trying it out in a tool like CodePen to discover what you like and don’t like.

The Web Animations spec is just beginning, and there is plenty more to come. Try the early/nightly builds of Firefox to see the future of Web Animations. You can already see fun future additions there like changing keyframes in the middle of a running animation and the ability to use the extended playback controls with CSS animations. Admittedly, it is unknown when these will make it to a stable browser, but these early builds give us a window into the future. And it’s a future that you can play with today.

See what works, see what doesn’t work, and start conversations now while these future specs are still in progress.

Dan Wilson
  Front End Developer

(Val’s Note: Two great places to get started with the WAAPI are Dan’s tutorial series and the MDN docs.)



UI Animation of the week:

We like small work page

We Like Small work page

This whole page is a unique take on a timeline of works examples, and the slight parallax number scrolling animation is my favourite part. It’s elegant, subtle, and really adds to the layering effect of the page layout.


GIF artist, Al Boardman on the importance of personal projects #art 
Finding the time for personal projects can be hard but articles like this one will help fuel your side project enthusiasm anew.

Fancy SVG letter animation #SVG #typography
Fun type animations are some of my favorite animations to see. Codrops breaks out some experimental SVG animation and anime.js for this shaded letters effect. They posted a fun creative SVG letters animation tutorial earlier this year too.

Blend 2017 Save the Date Teaser #motiongraphics
A lovely little short film from the organizers of Blend. The lively shapes and the sound design make it hard not to smile when you watch this one.

Chrome Music Lab #sound #experiment
The combination of animation and audio is well done all over. It’s hard to not want to spent way too much time with the different oscillators!


Recreating the Kikk festival site glitch effect #video #tutorial
Remember last week’s UI Animation of the week? Petr made a tutorial video walking you through how to create the same glitchy effects with CSS.

A Nerd’s Guide to Color on the Web #theory
A whole lot of information about colour from Sarah Drasner on CSS-Tricks. It’s one of those things we don’t think about too much until something goes wrong but understanding colour is very useful when animating between colours doesn’t give you the results you expected.

Radiobox CSS
Some very fun animated radio box effects done with CSS. Not all of them are practical, but it’s a nice reminder of how even the smallest parts of an interface can have a big impact.

Add a slider to a Greensock animation in one minute #JS
A short and sweet video by the CodePen crew showing you how to add a slider to your Greensock animations in no time flat.


Tweet this issue
Share this issue with a friend

Follow me on Twitter for more web animation news and resources.
Copyright © 2016 UI Animation Newsletter, All rights reserved.

Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list

Email Marketing Powered by Mailchimp