1603199340

An Intro to Framer Motion

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:

Image for post

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.

The Docs

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.

Image for post

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.

The good

API docs are easy to follow
The nav tree on the left was easy to search and not overwhelming
There were copious amounts of examples on the right, plus code sandboxes. This is exactly what a visual learner, like myself, needs.
In the center were the explanations for the declarative API. I enjoyed the fact that examples and example code had more screen real estate than the textual definitions.
The docs got into some technical aspects of animation performance with recommendations of which animations can be hardware accelerated — I was happily surprised to see this

#transitions #javascript #animation #programming #framer-motion

What is GEEK

Buddha Community

Cayla Erdman

1603199340

An Intro to Framer Motion

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:

Image for post

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.

The Docs

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.

Image for post

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.

The good

API docs are easy to follow
The nav tree on the left was easy to search and not overwhelming
There were copious amounts of examples on the right, plus code sandboxes. This is exactly what a visual learner, like myself, needs.
In the center were the explanations for the declarative API. I enjoyed the fact that examples and example code had more screen real estate than the textual definitions.
The docs got into some technical aspects of animation performance with recommendations of which animations can be hardware accelerated — I was happily surprised to see this

#transitions #javascript #animation #programming #framer-motion

Juana O'Keefe

1600818300

Cool Custom Cursors With React + Framer Motion

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.

Basic Custom Cursor

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