Tag Archives: animation

Three “buckets” of UI animation

Functional: Make sure your animation solves the user’s need first Material: Design consistent UI layers that allow spatially meaningful transitions Delightful: Give your animation some love, and your user will love your product back! Jedi Principles of UI Animation →

Elsewhere , , , Leave a comment

Einstein 100 – Theory of General Relativity

A short film celebrating the centennial of Einstein’s theory of General Relativity.

Elsewhere , , Leave a comment

Chrome’s new web animation controls

Elsewhere , , , Leave a comment

Popmotion

Check out this Pen! A 12kb JavaScript UI motion engine. Make it pop with animation, input tracking, and physics. It has native support for CSS, DOM attributes, SVG and SVG paths, and can be used with any API that accepts … Continue reading

Elsewhere , , , Leave a comment

Debugging CSS Animations

A few nice additions to working with CSS Animations have been added to the recent releases of the Firefox Developer Edition: Editing curves already was possible, yet a few default ones have been added: Chrome will also sport likewise features … Continue reading

Elsewhere , , , Leave a comment

Space.js – HTML-driven narrative 3D-scrolling

For our messages to communicate across efficiently, we need to create a powerful connection between the user and our medium. Today we are going to explore a new way of presenting stories on the web. And for this I’ve created … Continue reading

Elsewhere , , , , , Leave a comment

Polylion: SVG polygon animation

Using a tad of JavaScript it iterates all <polygon> elements of the SVG and animates them using TimelineMax. It’s also possible without TimelineMax, by using a CSS animation, and by changing animation-delay per <polygon>. // SCSS @keyframes polyonlion-animation { to … Continue reading

Elsewhere , , , Leave a comment

ScrollMe – A jQuery plugin for adding simple scrolling effects to web pages

<div class="scrollme"> <div class="animateme" data-when="enter" data-from="0.5" data-to="0" data-opacity="0" data-translatex="-200" data-rotatez="90" > Yup, that’s all. </div> </div> ScrollMe is a jQuery plugin for adding simple scrolling effects to web pages. As you scroll down the page ScrollMe can scale, rotate, translate … Continue reading

Elsewhere , , , , , , Leave a comment

scrollReveal.js – Easily reveal elements as they enter the viewport

<div data-sr="enter left please, and hustle 20px"> Foo </div> <div data-sr="wait 2.5s and then ease-in-out 100px"> Bar </div> <div data-sr="enter bottom and scale up 20% over 2s"> Baz </div> <script src=’/js/scrollReveal.min.js’></script> <script> window.sr = new scrollReveal(); </script> Just add data-sr … Continue reading

Elsewhere , , , , , 2 Comments

Shit Showreels Say

Elsewhere , Leave a comment