Skip to Main Content
Share

The First Law of (Website) Motion

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

    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

    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

    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

    Snabbt.js

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

  • Kute JS

    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.

  • Zurb Motion UI

    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

    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

    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

    Vivus JS

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

  • csshake

    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

motion

Leave Your Comment

Login to Comment

Become a Member

Not already a part of our community?
Sign up to participate in the discussion. It's free and quick.

Sign Up

 

Leave a comment
    Load more comments
    New code

    •