ScrollMagic
The javascript library for magical scroll interactions. (by janpaepke)
framer/motion
Open source, production-ready animation and gesture library for React (by framer)
Our great sponsors
| ScrollMagic | framer/motion | |
|---|---|---|
| 2 | 15 | |
| 13,761 | 14,484 | |
| - | 2.7% | |
| 1.4 | 9.6 | |
| about 1 month ago | 12 days ago | |
| JavaScript | TypeScript | |
| GNU General Public License v3.0 or later | MIT License |
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
ScrollMagic
Posts with mentions or reviews of ScrollMagic.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2021-10-03.
-
Anyone know any frameworks for creating scroll animations?
https://github.com/janpaepke/ScrollMagic is very popular and very easy to learn
-
Web Effect
ScrollMagic - The JavaScript library for magical scroll interactions.
framer/motion
Posts with mentions or reviews of framer/motion.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2022-05-10.
-
Animating in React (The Many Ways!)
Popularity: 14.5k stars on Github, and more than 1.1 million weekly downloads on NPM
-
Create a Satisfying Wavy Text Animation With Framer Motion
Our animation functionality basically works now... there's just a slight problem. The animation looks terrible. Luckily, we can use Variants in Framer Motion to solve our problem.
-
Animations / Effects library to use with react?
What do you mean? It's open source and MIT license. https://github.com/framer/motion/blob/main/LICENSE.md
-
framer motion
Play around with the duration and the easing. Hopefully this helps you a bit: https://github.com/framer/motion/issues/667
-
I couldn’t be prouder of my intro/mock-up of my already built Mac app (sprintdock.app). Thoughts guys?
These animations seem to be running from JS (at least that’s what it looks like to me), use CSS animations where possible and GPU accelerated ones where you need a bit more control (Motion One, Framer Motion, GSAP)
-
Adding a Command Palette to Your Website
Animations using Framer Motion
-
How to control the elements with react.js like this video ?
I spent a couple of hours putting a demo together. It turned out to be not quite as easy as I hoped as apparently framer does not yet support "onDragOver" events (https://github.com/framer/motion/issues/538 ).
-
How to make a Feedback Component to seamlessly collect reviews in React.JS
Framer Motion for micro-interactions
- Framer Motion, an animation and gesture library for React
-
High Performance 3D Animation with React + rxjs
In turn, it's common for us developers to lean on existing libraries to get the job done. framer-motion, react-spring and GSAP are great libraries, but we can learn a lot more about animation by implementing our own approach. What's more almost all animation libraries require us to work with someone else's conceptual model of user input. They provide extension APIs of course but we tend to implement each of these as closed-box concepts, you can consume them but not compose them freely.
What are some alternatives?
When comparing ScrollMagic and framer/motion you can also consider the following projects:
react-spring - ✌️ A spring physics based React animation library
fullPage - fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple
react-gsap-enhancer - Use the full power of React and GSAP together
react-motion - A spring that solves your animation problems.
GreenSock-JS - GreenSock's GSAP JavaScript animation library (including Draggable).
skrollr
iscroll
react-parallax-component - Easiest way to add scroll parallax effect on the component
stellar.js - Stellar.js - Parallax scrolling made easy
react-flip-move - Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
scrollMonitor - A simple and fast API to monitor elements as you scroll
three.js - JavaScript 3D Library.