The First Law of (Website) Motion

Pete Prestipino

Posted on 8.31.2017

What does physics have to do with digital design? In a word, everything - at least when it comes to encouraging interaction and deepening website engagement with users.

Newton's first law of motion says that an object at rest stays at rest and an object in motion stays in motion (with the same speed and in the same direction unless acted upon by an unbalanced force).

Now apply that to your website. Is the digital experience provided there moving your users in the direction you want (i.e., toward conversion)? If not, perhaps it is time to add a little motion and movement to your website. Doing so may just spark some positive 'Net activity.

Let's take a look at 10 interesting Web animation opportunities (scripts, etc.) that designers can use to positively impact the user experience.

Three.js

An incredibly powerful library that provides an opportunity to build 3-D animations using the canvas tag, svg, CSS3D and WebGL.
Animate.css

A library of cross-browser animations that offers a variety of functionality, from bouncing and shaking text to multiple fade-in and fade-out capabilities.
Particles.js

An easy-to-use generator for implementing particles animation based on a JavaScript library that supports setting color, number, shape, size and other preferences.
Snabbt.js

A super-lightweight (5kb) library that can animate any component - rotating, skewing, scaling or resizing their shape.
Kute.js

A popular JavaScript animation engine that is cross-browser compatible (thanks to a strong set of fallbacks) and packed with tools, methods and properties.
Motion UI

A Sass library from Zurb for creating flexible CSS transition and animations. Provides several predefined transitions and effects that can be applied to HTML components.
Dynamics JS

A JavaScript-powered library that offers standard effects for specifying duration, frequency, friction to achieve near real-life physics-based animations.
Sequence JS

A CSS-driven framework for creating responsive touch-enabled step-based animations, perfect for creating sliders, presentations, banners and other dynamic components.
Vivus JS

A lightweight JavaScript class that provides three types of animation (delaying, synchronizing and revealing) that will draw an SVG.
CSShake

Provides 11 classes that force DOM elements to shake. Control the direction (horizontal or vertical), type (fixed, crazy, constant, chunk), intensity (slow or hard) and more