Framer Motion — Animation Hooks

With the Framer Motion library, we can render animations in our React app easily.

In this article, we’ll take a look at how to get started with Framer Motion.

useReducedMotion

We can use the useReducedMotion hook to animate our elements based on the current device’s reduced motion setting.

For example, we can write:

#javascript

What is GEEK

Buddha Community

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:

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.

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

Learn Character Design in After Effects 2D Animation Course

With the help of this course, you can learn to create and animate characters who express with body language in After Effects. Our personal purpose is to help anyone interested in Animation to start practicing with little projects, simple Characters, and most of all, explore the expressiveness of their Body Language and Character Acting. Many people seldom to start learning 2D animation because they are convinced that you need to know how to draw. While drawing skills can help you to improve, that is not the essential skill to do animation. For animation you need to understand the most basic principles in animation, like timing, anticipation, pose to pose. This course is divided into 3 parts theory, rigging and animation which will help you learn how to design characters, character animation and body language expressions. Enroll now and Learn to create 2D Animation in After Effects.

#2d animation #character animation #character rigging #learn animation #animation courses

Animations in Flutter - 3. Cloning Animation

In this video tutorial, we are going to build a simple animation using flutter. In this animation, two circle containers overlap each other, the animation will separate these circles and make it look like a single container is cloning itself.

Source code: https://github.com/Flutter-Zone/Cloning-Animation

Let’s start our animation app. :)

#flutter #animations in flutte #cloning animation #animations

What are hooks in React JS? - INFO AT ONE

In this article, you will learn what are hooks in React JS? and when to use react hooks? React JS is developed by Facebook in the year 2013. There are many students and the new developers who have confusion between react and hooks in react. Well, it is not different, react is a programming language and hooks is a function which is used in react programming language.
Read More:- https://infoatone.com/what-are-hooks-in-react-js/

#react #hooks in react #react hooks example #react js projects for beginners #what are hooks in react js? #when to use react hooks

Animating list reordering with React Hooks

A little while ago I was given a cool design for an Instagram story styled bubble component where each bubble would smoothly slide into its new position when we got its new order from the API.

While it can be straightforward to do a whole load of animations and transitions with CSS, it took me a while to find an example of animating the reordering of list items, especially with React. Since I’ve also started to get used to the concepts of React Hooks I wanted to use them to implement this animation too.

I found this difficult to do using React hooks because my component would automatically rerender, in its new order, when it got new data. I was trying to hook into the moment before rerendering to smoothly transition from one state to another. Without the componentWillReceiveProps function call from the class components, this was hard to do.

I was under the (incorrect) assumption that there would be loads of React hooks examples out in the wild. I honestly just wanted a copypasta solution that I wouldn’t have to tweak too much 👀. I also didn’t want to bring in some huge, usually overly flexible package to reorder one small thing. I did come across a great post by Joshua Comeau (linked below). It explains how to do exactly what I needed, but with class components. With React hooks I needed to re-think some of the concepts to get it to work, but I’ve based the majority of this work on that post.

What we want to happen:

1. Keep an eye out for when our element list is going to change
2. When it changes we want to calculate the previous positions and the new positions of each element in the list before the DOM updates
3. Also before the DOM updates with the new order of the list we want to “pause” the update and show a smooth transition of each item in the list from its old position to its new position

Let’s start with a parent component that just renders the children that is passed into it, AnimateBubbles:

import React from "react";

	const AnimateBubbles = ({ children }) => {
	  return children;
	};

	export default AnimateBubbles;
view raw
AnimateReordering_AnimateBubbles-initial.jsx hosted with ❤ by GitHub

Then we can use that component by rendering our items inside of it. In my case I’ve created a Bubble component that adds the styles to make each image a circle, the full code is here. The Bubble component also forwards the ref onto the DOM element. This is important as we can use the ref to find where the element is rendered in the DOM, then we can calculate its position. Another important prop is the key, this is not only needed for React when mapping over elements, but we can also use later to uniquely identify each item and match its old and new positions in the DOM.

#react-hook #animation #uselayouteffect #react