visionmedia/move.js

★ 4,700JavaScriptAudience · developerComplexity · 1/5LicenseSetup · easy

Mindmap

mindmap
  root((move.js))
    What it does
      CSS3 animations
      Chained JS API
      No CSS required
    Animation types
      Position and move
      Rotation
      Scale
      Color change
    Features
      Easing functions
      Sequence chaining
      Native CSS rendering
    Setup
      npm package
      Script tag include

mindmap root((move.js)) What it does CSS3 animations Chained JS API No CSS required Animation types Position and move Rotation Scale Color change Features Easing functions Sequence chaining Native CSS rendering Setup npm package Script tag include

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Animate a card sliding into position on page load using a single chain of method calls instead of writing keyframe CSS.

USE CASE 2

Create a multi-step animation sequence where an element moves to a position, then fades out after a delay, using the .then() chaining API.

USE CASE 3

Apply easing curves like ease-in-cubic or ease-out-back to make UI animations feel more natural without computing cubic-bezier values by hand.

Tech stack

JavaScriptCSS3

Getting it running

Difficulty · easy Time to first run · 5min

Use freely in any project including commercial ones under the MIT license, no restrictions.

In plain English

Move.js is a small JavaScript library for animating elements on a webpage using CSS3 transitions. Rather than writing out the CSS animation rules yourself, you chain method calls in JavaScript and the library translates them into the appropriate CSS properties that the browser then animates natively. The approach is designed to keep animation code short and readable. A single chain of method calls can tell an element to move to a specific position on the screen, rotate by a certain number of degrees, scale up or down, change its background color, and set a duration for all of that to happen together. You can then chain a second animation with .then() that starts after the first one finishes, allowing sequences like fading out after moving into place. Move.js includes a set of named easing functions, which control how an animation accelerates and decelerates over time. Names like ease-in-cubic or ease-out-back correspond to specific mathematical curves that change the feel of motion, making it look more natural or bouncy or snappy. These are all standard CSS cubic-bezier values, so the actual animation runs in the browser at the CSS level rather than being computed by JavaScript on each frame. The library is available through npm and as a standalone script file you can include directly in an HTML page. It was written by TJ Holowaychuk and is released under the MIT license, which allows free use in any project.

Copy-paste prompts

Prompt 1

Using move.js, animate a div element so it slides 200px to the right, rotates 45 degrees, and scales up to 1.5x its size, all over 500ms with ease-in-out easing.

Prompt 2

I want a two-step animation with move.js: first move a box to the top of the screen, then after that finishes fade it out by scaling to zero. Show me the .then() chaining syntax.

Prompt 3

Show me how to include move.js in a plain HTML page without npm, and animate a button that bounces when clicked using an ease-out-back easing curve.

Prompt 4

Compare move.js vs Anime.js vs GSAP for simple UI animations: when would I choose move.js over the alternatives?

Open on GitHub → Explain another repo

← visionmedia on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.