Cayla  Erdman

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

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.

Contents

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)

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

An Intro to Framer Motion
Cayla  Erdman

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

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.

Contents

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)

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

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

Framer Motion for React

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

Juana  Torphy

Juana Torphy

1627198140

Animating React Apps with Framer Motion

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:

#react #framer

Brook  Hudson

Brook Hudson

1636185600

How to Write Page Transition Code with Next.js using Framer Motion

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