CSS3 backed JavaScript animation framework

Related tags

Animations move.js
Overview

Move.js

CSS3 JavaScript animation framework.

About

Move.js is a small JavaScript library making CSS3 backed animation extremely simple and elegant. Be sure to view the ./examples, and view the documentation.

Installation

With component(1):

$ component install visionmedia/move.js

With npm:

$ npm install move-js

With a stand-alone build

<script src='move.min.js'></script>

Example

For example below we translate to the point (500px, 200px), rotate by 180deg, scale by .5, skew, and alter colors within a 2 second duration. Once the animation is complete we then() fade out the element by setting the opacity to 0, and shrink it with scale(0.1).

move('.square')
  .to(500, 200)
  .rotate(180)
  .scale(.5)
  .set('background-color', '#888')
  .set('border-color', 'black')
  .duration('2s')
  .skew(50, -10)
  .then()
    .set('opacity', 0)
    .duration('0.3s')
    .scale(0.1)
    .pop()
  .end();

Easing functions

Built-in easing functions are defined as:

'in':                'ease-in'
'out':               'ease-out'
'in-out':            'ease-in-out'
'snap':              'cubic-bezier(0,1,.5,1)'
'linear':            'cubic-bezier(0.250, 0.250, 0.750, 0.750)'
'ease-in-quad':      'cubic-bezier(0.550, 0.085, 0.680, 0.530)'
'ease-in-cubic':     'cubic-bezier(0.550, 0.055, 0.675, 0.190)'
'ease-in-quart':     'cubic-bezier(0.895, 0.030, 0.685, 0.220)'
'ease-in-quint':     'cubic-bezier(0.755, 0.050, 0.855, 0.060)'
'ease-in-sine':      'cubic-bezier(0.470, 0.000, 0.745, 0.715)'
'ease-in-expo':      'cubic-bezier(0.950, 0.050, 0.795, 0.035)'
'ease-in-circ':      'cubic-bezier(0.600, 0.040, 0.980, 0.335)'
'ease-in-back':      'cubic-bezier(0.600, -0.280, 0.735, 0.045)'
'ease-out-quad':     'cubic-bezier(0.250, 0.460, 0.450, 0.940)'
'ease-out-cubic':    'cubic-bezier(0.215, 0.610, 0.355, 1.000)'
'ease-out-quart':    'cubic-bezier(0.165, 0.840, 0.440, 1.000)'
'ease-out-quint':    'cubic-bezier(0.230, 1.000, 0.320, 1.000)'
'ease-out-sine':     'cubic-bezier(0.390, 0.575, 0.565, 1.000)'
'ease-out-expo':     'cubic-bezier(0.190, 1.000, 0.220, 1.000)'
'ease-out-circ':     'cubic-bezier(0.075, 0.820, 0.165, 1.000)'
'ease-out-back':     'cubic-bezier(0.175, 0.885, 0.320, 1.275)'
'ease-out-quad':     'cubic-bezier(0.455, 0.030, 0.515, 0.955)'
'ease-out-cubic':    'cubic-bezier(0.645, 0.045, 0.355, 1.000)'
'ease-in-out-quart': 'cubic-bezier(0.770, 0.000, 0.175, 1.000)'
'ease-in-out-quint': 'cubic-bezier(0.860, 0.000, 0.070, 1.000)'
'ease-in-out-sine':  'cubic-bezier(0.445, 0.050, 0.550, 0.950)'
'ease-in-out-expo':  'cubic-bezier(1.000, 0.000, 0.000, 1.000)'
'ease-in-out-circ':  'cubic-bezier(0.785, 0.135, 0.150, 0.860)'
'ease-in-out-back':  'cubic-bezier(0.680, -0.550, 0.265, 1.550)'

Build

Move is packaged with a minified version, re-built each release. To do this yourself simply execute:

 $ make move.min.js

We can also pass flags to uglifyjs:

 $ make UGLIFY_FLAGS=--no-mangle

More Information

License

(The MIT License)

Copyright (c) 2011 TJ Holowaychuk <[email protected]>

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Comments
  • uncaught exception: [Exception...

    uncaught exception: [Exception... "Not enough arguments" nsresult: "0x80570001

    Hi Tj.

    getting this error in Firefox 4.0.1 (pc) when I try the demos on the docs page when I Press play on the first demo works fine in chrome

    http://visionmedia.github.com/move.js/

    uncaught exception: [Exception... "Not enough arguments" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: http://visionmedia.github.com/move.js/move.min.js :: <TOP_LEVEL> :: line 5" data: no]

    opened by bluntworks 13
  • package.json, npm and browserify support

    package.json, npm and browserify support

    This pull request solves issue/41, issue/42 and issue/71, the first two relating to missing package.json, missing npm entry and therefore missing browserify support. The issue/41 has many details about the issue and its solution. After the merge, move.js can be downloaded via npm and used with browserify but still continued to be used with component(1) just as before.

    After merge, one more thing is required by you, precious collaborator: npm publish

    This pull request includes

    • npm installation instructions in Readme.md
    • brand new package.json, rewritten from component.json
    • replacing require('emitter') by require('component-emitter') and similar as discussed in issue/41, providing compatibility for both component(1) and node/commonjs/browserify.
    • removing remotes from component.json because the public component must not contain any remotes. If remotes exists, running component install produces error no remote found for dependency ....
    • new builds of move.js and move.min.js, built with make move.js and make move.min.js. Apparently a few extra kilobytes were shaved off as well (28 kB -> 26 kB and 16 kB -> 14 kB).
    • Version bumb to 0.5.0, because otherwise some 0.4.0 would work with npm and some would not.
    opened by axelpale 12
  • Remove transition-duration style after move?

    Remove transition-duration style after move?

    After completing a move animation, the [-vendor]-transition-duration style is still on the element, which will alter other interactions outside of move.js. Current workaround is to remove it by passing callback to final end().

    Perhaps the top-level end() should remove this style as part of move.js?

    opened by martypdx 6
  • Clear transition-duration in end()

    Clear transition-duration in end()

    This adds the line to also clear the transition-duration alongside the transform and transition-property properties. It also calls applyProperties() which means the changes are actually made.

    opened by joebain 4
  • Ender Integration

    Ender Integration

    Added support and bridge for Ender. See my version of readme, 'integration/index.html', or let me know if you have questions.

    If you accept these changes, please publish to npm.

    opened by logicalparadox 4
  • Bashing a button with

    Bashing a button with "add" or "sub" doesn't work as intended

    Bashing a button to move an element takes the value as the element is clicked during the animation to add it to the value. A callback should be awaited

    opened by Koroeskohr 3
  • Does not run in IE10?

    Does not run in IE10?

    I'm experimenting with move.js, but on IE10, animations aren't visible at all. Check for example your demo page.

    I don't know why move.js shouldn't run on IE10. Modernizr detects csstransforms and csstransitions.

    Do you have more information?

    opened by sbusch 3
  • how can i use the move.js to run a animation infinitely?

    how can i use the move.js to run a animation infinitely?

    I want a box to slide infinitely and i prefer doing it with move function directly, because the effect with css3 keyframe is crappy. But i didn't figure out a way to make move function run infinitely, is it possible?

    Here is my code with move.js (the effect looks good):

    function play(){
              var moveBack = move('.box')
                  .x(0)
                  .duration(10000);
    
                  move('.box')
                  .x(1000)
                  .duration(10000)
                  .then(moveBack)
                  .end();
    
            }
    

    And here is my code using CSS3 Keyframes (the effect looks crappy, but it runs inifinitely):

    function play(){
              move('.box').animate('slide', {
                duration: '100s',
                'iteration-count': 'infinite'
              }).end();
            }
    
    @-webkit-keyframes slide {  
            0% {  
              left: 0;
            }  
    
            50% {  
              left: 500px;
            } 
            100% {  
              left: 0;
            } 
          }
    
    opened by cyberglot 3
  • Make move.js YUI-compressor compatible.

    Make move.js YUI-compressor compatible.

    Right now, it's structured this way:

    exports.Move = function Move() { ... }
    Move.prototype.x = ...
    

    This presents a problem as YUI compressor may mangle function Move() into a non-named function. We've encountered this problem using move.js with Jammit.

    opened by rstacruz 3
  • transforms should not be cloned on then

    transforms should not be cloned on then

    When calling "then", the transforms are being cloned. This results in the following code not functioning properly when run with the markup from /examples/transform.html.

    move('#square').rotate(300).duration('2s').then().rotate(0).duration('1s').pop().end()
    

    expected the square should transition to the 300 degree rotation over 2 seconds then return to 0 degree rotation over 1 second. actual the square transitions to 300 degree rotation over 2 seconds but the style property is set to rotate(300deg); rotate(0deg) when the 1s transition executes.

    opened by bruce-lindsay 2
  • doesnt apply on recently updated elements in angular js

    doesnt apply on recently updated elements in angular js

    I have used move.js along with angular.js and trying to add some animations to newly added elements. when the elements are static it works fine.

    Problem : Now,when i try to add the same to newly scope elements it doesn't apply.I guess there would be some issue with the sequence of execution. As the move.js functions functions runs before my angular js updates the scope method.

    so far, i tried :+1:

    1. Included it before body closing tag.
    2. tried to get the regular jquery last element get function to identify the last element in the list(ie my newly added element) but it takes last but one element and applies my animations to that code.

    Please let me know if i have any alternative or used any wrong approach.

    Thank you in advance.

    opened by manoj529 2
  • Use jquery.easing.js Effects??

    Use jquery.easing.js Effects??

    Hey there, if this isn't the place to post this, I apologise. I'm kind of a ~~rookie~~ intermediate js user, and I've been searching all over but haven't been successful at finding out just how would one go about using the easing.js extended effects lib together with move.js? Thanks in advance...

    opened by thepragg 0
  • Added reflow method

    Added reflow method

    Added reflow method to simplify task of modifying style properties and immediately animating with those changes.

    el.style.opacity = 0;
    
    Move(el)
    .reflow() //Reflows DOM element so animation will occur
    .set('opacity', `)
    .duration('1s')
    .end();
    
    opened by jasonlav 0
  • Prevent exponential notation (e.g. 1.0e-19) reaching CSS

    Prevent exponential notation (e.g. 1.0e-19) reaching CSS

    Safari and Opera do not yet support scientific number notation in CSS. In JS, when very small numbers are converted to string, we usually end up with something like "-8.43858185037473e-19".

    These unsupported number strings can reach this._transforms within Move.js, corrupting the resulting transformation.

    For example, in my project, the following transformation string did not work in Safari 9.0.2:

    "matrix(-8.43858185037473e-19, -0.003906249999999999, 0.003906249999999999, -8.43858185037473e-19, -1.3819999999999997 ,0.5000000000000001)"
    

    There is some discussion how to prevent this.

    opened by axelpale 0
  • Animations in background tabs

    Animations in background tabs

    I've got a few animations following one another. They work fine when I open the tab, however, when I open the tab in the background and switch to it later, I see that the animations overlap. After a few seconds, they "catch up".

    Is this a known issue / something that has been observed before?

    opened by petrklus 1
  • Several examples are not working

    Several examples are not working

    Failed to load the images from http://images.apple.com/ These examples include: move.js-master/examples/jquery.html move.js-master/examples/imac.html ect. You can check it in the download zip file named move.js-master.

    screenshot_

    opened by zeakhold 0
Releases(0.5.0)
  • 0.5.0(Nov 30, 2015)

    • add npm / browserify support, closes #41 and #42 @axelpale
    • remove remotes from component.json, closes #71 @axelpale
    • add legacy IE browsers support @nobuti
    Source code(tar.gz)
    Source code(zip)
It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

impress.js It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prez

impress.js 37k Nov 22, 2022
Super-smooth CSS3 transformations and transitions for jQuery

jQuery Transit Super-smooth CSS3 transformations and transitions for jQuery jQuery Transit is a plugin for to help you do CSS transformations and tran

Rico Sta. Cruz 7.4k Nov 21, 2022
Create beautiful CSS3 powered animations in no time.

Bounce.js Bounce.js is a tool and JS library for generating beautiful CSS3 powered keyframe animations. The tool on bouncejs.com allows you to generat

Tictail 6.2k Nov 20, 2022
A jquery plugin for CSS3 text animations.

Textillate.js v0.4.1 See a live demo here. Textillate.js combines some awesome libraries to provide an easy-to-use plugin for applying CSS3 animations

Jordan Schroter 3.6k Nov 27, 2022
JavaScript animation engine

anime.js JavaScript animation engine | animejs.com Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful AP

Julian Garnier 43.8k Nov 25, 2022
Accelerated JavaScript animation.

Velocity beta NPM: npm install [email protected] Docs https://github.com/julianshapiro/velocity/wiki IMPORTANT: The velocityjs.org documentation r

Julian Shapiro 17.2k Nov 26, 2022
GreenSock's GSAP JavaScript animation library (including Draggable).

GSAP (GreenSock Animation Platform) Professional-grade animation for the modern web GSAP is a robust JavaScript toolset that turns developers into ani

GreenSock 15.2k Nov 23, 2022
🐿 Super easy and lightweight(<3kb) JavaScript animation library

Overview AniX - A super easy and lightweight javascript animation library. AniX is a lightweight and easy-to-use animation library with excellent perf

anonymous namespace 256 Sep 19, 2022
GreenSock's GSAP JavaScript animation library (including Draggable).

GSAP (GreenSock Animation Platform) Professional-grade animation for the modern web GSAP is a robust JavaScript toolset that turns developers into ani

GreenSock 15.3k Nov 29, 2022
Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation

Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation

Mladen Plavsic 333 Nov 13, 2022
Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility

Animate Plus Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility. It aims to deliver a steady 60 FPS and

Benjamin De Cock 5.9k Nov 27, 2022
Create scroll-based animation without JavaScript

Trigger JS Create scroll-based animation without JavaScript. Sometimes we want to update the CSS style of an HTML element based on the scroll position

Trigger JS 1.1k Nov 30, 2022
Animation library that mimics CSS keyframes when scrolling.

Why Motus ? Motus allows developers to create beatuful animations that simulate css keyframes and are applied when the user scrolls. Features Node & B

Alexandru Cambose 570 Nov 22, 2022
React particles animation background component

particles-bg React component for particles backgrounds This project refers to the source code of the Proton official website, I packaged it into a com

lindelof 555 Nov 21, 2022
Theatre.js is an animation library for high-fidelity motion graphics.

Theatre.js is an animation library for high-fidelity motion graphics. It is designed to help you express detailed animation, enabling you to create intricate movement, and convey nuance.

Aria 8.4k Nov 25, 2022
Making Animation Simple

Just Animate 2 Making Animation Simple Main Features Animate a group of things as easily as a single thing Staggering and delays Chainable sequencing

Just Animate 254 Nov 21, 2022
UI Framework for AngularJS

Suave UI 0.3.1 UI Framework for AngularJS Suave UI is designed for web-applications based on AngularJS. It consists of CSS definitions, directives and

Semyon V 339 Aug 3, 2022
A lightweight JavaScript library for creating particles

particles.js A lightweight JavaScript library for creating particles. Demo / Generator Configure, export, and share your particles.js configuration on

Vincent Garreau 26.5k Nov 20, 2022
Javascript library to create physics-based animations

Dynamics.js Dynamics.js is a JavaScript library to create physics-based animations To see some demos, check out dynamicsjs.com. Usage Download: GitHub

Michael Villar 7.5k Nov 26, 2022