1603199340
Framer Motion is an animation and gesture library that has had an incredible growth in popularity in the last year. Take a look at these downloads — one year ago and today:
npm download stats for the first week of October 2020
Given these numbers, familiarity with the library is a smart move. We’ll take a look at the quality of the docs, dive into some beginner and advanced examples, and finally wrap up with key points about how to use the library.
1\. Diving into the docs
2\. Animation stacking with the bouncy ball animation
3\. Scale on drag with the grow ball animation
4\. Color transition with color bouncer
5\. Key takeaways
6\. Resources (code and a video version of this article)
There’s nothing more frustrating than hearing about a library that everyone’s using then feeling like you’re the only one struggling because you can’t make heads or tales of the documentation.
A screenshot of the Framer Motion API docs
In my opinion, and for my very visual learning style, the docs quickly gave me a sense of confidence that I could accomplish basic animations with Framer Motion.
#transitions #javascript #animation #programming #framer-motion
1603199340
Framer Motion is an animation and gesture library that has had an incredible growth in popularity in the last year. Take a look at these downloads — one year ago and today:
npm download stats for the first week of October 2020
Given these numbers, familiarity with the library is a smart move. We’ll take a look at the quality of the docs, dive into some beginner and advanced examples, and finally wrap up with key points about how to use the library.
1\. Diving into the docs
2\. Animation stacking with the bouncy ball animation
3\. Scale on drag with the grow ball animation
4\. Color transition with color bouncer
5\. Key takeaways
6\. Resources (code and a video version of this article)
There’s nothing more frustrating than hearing about a library that everyone’s using then feeling like you’re the only one struggling because you can’t make heads or tales of the documentation.
A screenshot of the Framer Motion API docs
In my opinion, and for my very visual learning style, the docs quickly gave me a sense of confidence that I could accomplish basic animations with Framer Motion.
#transitions #javascript #animation #programming #framer-motion
1600818300
I am constantly surprised and inspired by so many websites on awwwards.com, many of which frequently feature cool cursors and various effects.
In these series, I’ll break down the process of making custom cursors and try to experiment with various cool visual effects based on them, all using React.js and Framer Motion.
First, let’s start by defining some basic structure and styling for our custom cursor, which will just be a black circle and be placed in a fixed
position at the top: 0; left: 0;
corner for now.
function App() {
return (
<div className="App">
<div className="cursor" />
</div>
)
}
---------------------------------
.cursor {
position: fixed;
left: 0;
top: 0;
width: 32px;
height: 32px;
border-radius: 16px;
background-color: black;
}
Now that we have the custom cursor let’s bring it to life with some JavaScript. First, we need to capture the mousemove
events and define a listener function which will animate our cursor to a correct position.
Since we’ll be using a functional component we need to define our listener in a useEffect
hook.
import React, { useState, useEffect } from "react"
function App() {
const [cursorXY, setCursorXY] = useState({ x: -100, y: -100 })
useEffect(() => {
const moveCursor = (e) => { }
window.addEventListener('mousemove', moveCursor)
return () => {
window.removeEventListener('mousemove', moveCursor)
}
}, [])
return (
...
)
}
...
#framer-motion #css #cursor #react #react native
1591844520
Welcome to your first Frame Motion (for React) tutorial. In this tutorial I’ll explain what Framer Motion is and what you’ll need to know already.
#react #reactjs #framer
1627198140
In this tutorial, we’ll learn how to animate React applications with Framer motion by building a contact cards application.
Here are the relevant links:
Framer motion documentation: https://www.framer.com/motion/
Live app: https://react-contact-cards.netlify.app/
Starter repo: https://github.com/ebenezerdon/react-contact-cards/tree/framer-tutorial-starter
Complete project repo: https://github.com/ebenezerdon/react-contact-cards
React/Tailwind course: https://youtu.be/3g42k_JVqI4
00:00:00 - Introduction
00:02:42 - An overview of our React codebase
00:04:30 - Setting up Framer in our React app
06:11:44 - Animating our contact cards display
00:16:57 - Animating our modal
00:22:39 - Wrapping up
#react #framer
1636185600
Getting page transitions going in next.js is really easy now. Thanks to Framer Motion. Look for more Framer tutorials in the future :)
Code: https://github.com/wrongakram/nextjs-page-transitions
#framermotion #nextjs #Motion