Skip to content

stels-community/animate.js

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 

Repository files navigation

animate.js

No matter, what you animate, in Javascript that one of two: object property, or function argument.

Animate what You want :)

compact and fast vanilla.js anythig animation library

Usage:

animate any attributes of function:

animate({
  target: window.scrollTo,
  interval: 100, // set framerate to 10 fps (1000/interval) default value 50 ms (20 fps)
  duration: 2000, // 2 sec
  easing: 'easeInOutExpo', // any functions, listed at http://easings.net/en are present plus easeLinear
  attributes:[
    0, // x attribute not animated, so just pass a static value
    { from: window.scrollY, to: 0 } // scroll to the page start
  ]
})

animate any properties of object:

animate({
  target: document.getElementById('my_div').style,
  duration: 2000, // 2 sec
  easing: 'easeOutCubic', 
  properties:{
    top: { from: 200, to: 100, post: 'px'} , 
    transform: { pre: "rotate(", from: 0, to: 360, post: "deg)" },
    opacity: { from: 1, to: 0 }
  }
})

About

compact and fast animation library

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%