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 框架中使用动画；我们提供了单项，组合动画，以及整套解决方案。

Plstopfic

• 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.

Misc

• 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.

Carousel | 走马灯

• 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.

Parallax

• rellax : Lightweight, vanilla javascript parallax library.

• ScrollTrigger

• basicScroll : Standalone parallax scrolling for mobile and desktop with CSS variables.

• 2018-react-parallax : A React Component for parallax effect.