Git Product home page Git Product logo

animate.js's Introduction

animate.js

Simple animation function - lightweight replacement for jQuery.animate and Velocity.js with pluggable easing functions.

Example:

import { easeInQuad } from './easings.js';

//run a factory function and provide an easing functions
const animate = initAnimate(easeInQuad);

let duration = 1000;
let from = 100;
let to = 300;

//runs on each frame with a value as per easing function
let animFunc = function(value) {
  element.style.left = value + 'px';
}

//callback runs at the end of animation
let callback = function(value) {
  console.log('callback runs and gets:', value);
}

//runs the animation
animate(duration, from, to, animFunc, callback);

Run initAnimate(easing) factory function and provide one of the easing functions (from easing.js file) based on Penner's equations.

The factory function returns an animation function that changes value "from" given value, "to" given value over provided "duration" according to the chosen easing. On each frame it will run a function giving to it a value. When finished, it will run a callback.

animate.js's People

Contributors

alanbo avatar

Stargazers

Kevin Kwan avatar DAVID TIM avatar Kirill Shestakov avatar HiST avatar

Watchers

James Cloos avatar Giorgio Riccardi avatar  avatar DAVID TIM avatar

animate.js's Issues

NPM

Nice module, was wondering if you fancy popping it up to NPM for me? would like to use it

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.