Web Animation OpenSource List

  • react-tilt : 👓 Parallax tilt hover effect for React JS - tilt.js

Motion Library

  • 2018-Framer Motion : Open source, production-ready animation and gesture library for React.

  • mojs : The motion graphics toolbelt for the web

Animation Effect

  • Woah.css : Animations for eccentric developers.

  • Effeckt.css

  • Hover.css : A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.

  • iHover : iHover is an impressive hover effects collection, powered by pure CSS3, no dependency, work well with Bootstrap 3!

  • cssfx : A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by CSS with minimal markup. Completely open source and MIT licensed.

  • CssCo: Photographic filters made with CSS, inspired by VSCO and CSSgram.

Tween Animation | 补间动画

  • react-motion : A spring that solves your animation problems.

  • 2017-Popmotion : A functional JavaScript motion library.

  • react-move : React Move 🌀 Beautiful, data-driven animations for React.

  • popmotion : Simple animation libraries for delightful user interfaces.

  • 2017-animateplus : Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility. It aims to deliver a steady 60 FPS and weighs less than 3 KB (minified and compressed), making it particularly well-suited for mobile

  • 2017-Ant Motion : 使用 Ant Motion 能够快速在 React 框架中使用动画;我们提供了单项,组合动画,以及整套解决方案。


  • Turn.js : Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5.


  • ola : Smooth animation library for interpolating numbers.

Scroll Animation

Element Scroll

  • MoveTo : A lightweight (only 1kb gzipped) scroll animation javascript library without any dependency.

Page Animation

  • Locomotive Scroll : 🛤 Detection of elements in viewport & smooth scrolling with parallax.
  • 2017-A Content Slider : Here, we shall be creating something that fulfills the basic purpose of a carousel — to allow the traversal of content along a horizontal axis — without being too reverential about the characteristics of past implementations.