Skip to content
This repository has been archived by the owner on Jan 16, 2020. It is now read-only.

OutSystems/AutoAnimations

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 

Repository files navigation

AutoAnimations

"It's like auto-tune for web pages"

Automatically animate all inserted and removed DOM elements with good defaults:

  • Slide down/up for elements with display=block & position=static
  • Fade in/out for all others
  • Elements with existing CSS transitions or animations will be left alone
  • Uses velocity.js to assure smooth 60fps animations even in mobile

compare with http://todomvc.com/examples/react/ (that has no autoanimate)

##USAGE Just include this script, and add an animation-duration to your css, e.g.

* { 
    animation-duration: .2s; 
}

####NOTES

  • Elements shown/hidden using the style's display (e.g. jquery's show, hide and toggle) will not be animated.
  • In javascript UI frameworks (e.g. React) it's recommended that this script is run after first render
  • You can add this as the URL of a bookmark to create a bookmarklet to test it in any web page:
    • javascript:(function(){document.styleSheets[0].insertRule("* {animation-duration: .2s}", 0);document.body.appendChild(document.createElement('script')).src='https://rawgit.com/OutSystems/AutoAnimations/master/AutoAnimations.js';})();
  • This overrides HTMLElement prototype methods, so it's a huge hack (only a POC) and there might be several side effects.

####EXCEPTIONS If you don't want some element to automatically animate (e.g. external libraries) just set its animation-duration to 0s, e.g. :

.SomeCustomComponent, .SomeCustomComponent * {animation-duration: 0s; }  

About

Automatically animate all inserted and removed DOM elements

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published