-
Notifications
You must be signed in to change notification settings - Fork 71
Motion for React (oudated)
Davo Galavotti edited this page Jul 18, 2019
·
1 revision
Intention: This is list of libraries, articles and demos about Motion for React.
- 🆕React Move - React Move 🌀 Beautiful, data-driven animations for React React Move Demo Site
- React Motion - A spring that solves your animation problems. See react-motion.
- React Spring - Helping react-motion and animated to become best friends.
- 🆕React Pose - Declarative motion system for HTML, SVG & React (based in Popmotion).
- Animated - Declarative Animations Library for React and React Native. Interactive Docs.
- React Move - Beautiful, data-driven animations for React.
- React Anime - A super easy animation library for React (based on anime.js).
- React Lottie - Easily add high-quality animation to any native app.
- 🆕Data Driven Motion.
This is a collection of JS motion libraries that can be used with React, using different implementation techniques.
- GSAP - Ultra high-performance, professional - grade animation for the modern web.
- react-gsap-enhancer - Use the full power of React and GSAP together.
- React & GSAP - DEMO: Animated World
- Anime.js - JavaScript Animation Engine.
- React + Anime - DEMO: Image slider with thumbnail previews.
- React + Anime - DEMO: Reactive Example
- Velocity.js - Accelerated JavaScript animation.
- React & Velocity.js - React components for Velocity.js
- Popmotion- A functional JavaScript motion library
- Popmotion x React - A declarative interface to use Popmotion’s animation and input tracking with any React component (deprecated, see Pose).
- MO.js - Motion graphics tool-belt for the web.
- Animate.css - Just-add-water CSS animations.
- CSS3 Animation Cheat Sheet - A set of presets & plug-and-play animations for your web projects.
- Bounce.js - A tool and JS library that lets you create beautiful CSS3 powered animations.
- CSS Animations explained
- CSS Animations vs Web Animations API
- Myth Busting: CSS Animations vs. JavaScript
- Keyframe Animation Syntax
- CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More
- A Comparison of Animation Technologies
- CSS Animation Reference
- CSS Animation Rocks
- What’s the most developer-friendly React animation library?
- React Official Documentation: React Transition Group
- Building Animations in React From Scratch
- Using Lottie with React Native
- React Animation HOC
- react-poker Animate dealing a poker game with springs.
- react-router-transition Wrapper for using React-motion with React-router.
- react-collapse Wrapper for collapse animation for elements with variable and dynamic height. Supports nesting.
- react-motion-ui-pack Wrapper component around React Motion for easier UI transitions
- react-motion-example Using TransitionSpring
- Kabuki-Motion Boilerplate for Web Animators
- react-motion-menu Motion menu component powered by React Motion.
- react-sortable-pane Sortable and resizable pane component for React.
- react-draggable-list React component for a list of draggable collapsible items.
- react-smooth-draggable-list another draggable list
- react-motion-drawer Drawer menu component powered by React Motion.
- 3D/VR camera animations Using react-motion and a-frame to animate the camera position Source
- data-driven-motion Small wrapper that attempts to simplify the api of TransitionMotion
- modal-example-using-portals A modal example using new react16 portals, animated with react-motion
- solar system using react-motion to visualize planetary orbit
-
Manta. Use
react-motionfor various animations in the app.
- A gentle introduction to React Motion
- Youtube Channel: FroDev This Youtube channel has some really helpful tutorials on React Motion. It is too many to list. Looks for videos with "React-Motion" in the title.
- Youtube Tutorial: Connected animation with React-Motion and Redux
- Youtube Tutorial: Staggered animation with React-Motion