Framer Motion. Everything for a new or existing React web build

Framer Movement animation library

Framer Movement is a React library that permits you to shortly construct each easy and extra advanced animations in a declarative manner.

At The Software program Home, we at all times use confirmed and supported applied sciences that present beautiful developer expertise (DX), and most significantly, permit for speedy product improvement. Framer Movement met our necessities in varied initiatives with essential audiovisual layers. Animations carried out with this resolution match completely into additional visible enrichment of functions. Because of Framer Movement’s functionalities we had been in a position to present not solely wealthy animations but in addition pace up the overall improvement and enhance person expertise and engagement. 

Some cool options:

• primary animation of components is finished by the ‘movement’ part. You’ll be able to consider it as a normal HTML or SVG factor enhanced with animation capabilities.

• to outline the enter animation after mounting the part, you edit the worth of the ‘animate’ discipline.

• implement reusable and orchestrated animation with Variants.

• by implementing gesture assist, and drag and drop, you’ll be able to create superior animations that reply to person interplay.

• assist for scrolling animations playback, extremely helpful to visible storytelling.

• compatibility with server-side rendering that interprets into better optimization.

Why is it higher to make use of framer-motion than tinker with CSS + JS animations your self?

When builders take into consideration animations, often the primary methodology that pops up is pure CSS + conditional playback utilizing JavaScript. Nonetheless, this path is commonly bumpy if you need to implement something remotely advanced. This crucial strategy to animation is tough to take care of as a result of descriptive manner of writing code. 

In React’s (and Framer Movement’s) case, we use declarativeness — the way in which of writing code that represents the impact, thus simple to learn and keep. 

We’ve examined many alternate options to Framer Movement however actually, none of them present a lot flexibility and functionalities – up to now it has been irreplaceable. 

react-transition-group 

Small bundle dimension, very simple to make use of, distinguishes animation occasions (“getting into” | “entered” | “exiting” | “exited” | “unmounted”) that may be styled one after the other. Just a few options make it not appropriate for extra advanced animations – the expertise is just like making animations in CSS. Not very “reacty” – there’s no hook API, solely elements. 

Rumor has it that in TypeScript RTG is required to outline types for every transition which will be annoying. 

react-spring

Barely bigger bundle dimension than RTG however with extra options obtainable. Animation physics is kind of correct and will be closely personalized, e.g. including mass to components, or altering acceleration. No want to harm efficiency with re-renders, Framer Movement retains these re-renders to an absolute minimal. 

So far as hooks are involved, react-spring requires wrapping its particular animated components with hooks that outline animation varieties. That will increase the training curve and requires extra data to know which sort is essentially the most applicable for a given animation.

Framer Movement permits you to use useSpring to implement “spring” animations.

GSAP (GreenSock Animation Platform)

A well-liked library for animation design, primarily for sequential animations, i.e. positioned on a timeline. An excellent animation efficiency is ideal for storytelling.  

The massive draw back is a excessive studying curve. The crucial nature of this resolution as an alternative of describing the outcomes you need to obtain, reveals you the steps solely. What’s extra, GSAP has a customized license which suggests the library isn’t free for all business initiatives. Verify the license tips to be taught extra. 

CSS

No bundle dimension, pure CSS animation. 

Downsides? It requires you to explain all of the animation steps (one after the other!). Animating something is cumbersome and takes quite a lot of time. Because it’s pure CSS, it’s not doable to vary the DOM throughout the animation. Lastly, to create an animation for the enter factor in Viewport, you will need to moreover use React. 

If a tech mission must be quick, simple to take care of, and supply essentially the most assist for animations, for us it’s Framer Movement or nothing. 

Including Framer Movement to a brand new or current mission

Animated stepper implementation

On this instance, we are going to create a easy stepper to cowl the fundamental ideas of Framer Movement animation. We are going to use the next:

• variants
• AnimatePresence part
• movement elements

Firstly, let’s create a separate <Stepper /> part.
It is best to outline its particular step quantity and state worth for the present step.

We are going to use <AnimatePresence /> part to animate the mounting of our checkmark. This part is kind of magical – it solely wants preliminary and animate properties for any of its youngsters (of any depth) to begin working! ?

Outline variants and checkmark transitions

Having that out of the way in which, allow us to outline variants and transitions for the checkmark.

pathLength property for variants will animate SVG in “drawing” vogue – it makes use of a trick the place you alter the trail from a stable line to dashed, with gaps sufficiently big to cover a component, after which change its worth, so it simulates the drawing impact. Fortunately you needn’t trouble with difficult values – Framer Movement offers with them for you!

Subsequent up, we set variants for movement.div wrapper for managing general colours on completely different stepper statuses. On this instance, we are going to outline three statuses: 

1. Inactive, for steppers with step worth better thancurrentStep.
2. Present, for steppers with step worth equal to currentStep.
3. Checked, for steppers with step worth decrease than currentStep.

getStatus is our helper operate to retailer the standing worth in fixed after which move it on to the  animate property on the movement.div part.

What’s left is to wrap the whole lot in React and render it in your web page.

And that’s it! You might be able to cruise along with your neat stepper. ?

You’ll be able to outline these properties in two methods:

1. Cross the item on to the property, e.g.

2. Cross the item of Variants, after which move solely the variant title to the property, e.g.

Personally, we favor the second possibility as a result of, in the long term, it’s far more readable and reusable (however each are okay to make use of!).

Gestures characteristic in Framer movement (e.g. pull all the way down to refresh) 

The gestures module is particularly helpful for cell apps (pan and drag gestures), but it surely additionally comes with hover and focus gestures that shine on desktop variations. 

Right here we are going to implement a “pull to fetch” characteristic, helpful for refreshing information on cell apps. As for the Framer Movement library, we are going to use:

• useSpring and useTransform hooks for calculating animated values,
• drag and drag-related properties on movement part,
• useAnimation for launching animations for our spinner.

Initially, we have to arrange animation variables. The center of all animations is useSpring, then we set extra variables with useTransform. 

It’s used for calculating Y place when scrolling. Stiffness and damping properties are for smoothing issues out. Ratio 10:1 makes it buttery clean, with out pointless bounce, however you’ll be able to play with these values and set them to your coronary heart’s want.

We use useSpring as an alternative of the curiously often-recommended on-line useMotionValue. useSpring easily calculates the animation with lovely results, even if you happen to power these adjustments with different capabilities (you’ll see it under within the code snippet). Forcing adjustments with useMotionValue causes ignoring animations alongside the way in which, which makes tiles uneven and jumpy

useTransform hooks are additionally nice for animation values dealing with. We are going to use them for animating our spinner.  

In regards to the props: 

• the primary worth is for setting “watcher” to chosen worth.
• the second worth is our minmax threshold to look at on that worth.
  So in each of our transforms, we look ahead to adjustments in scrollY between 0 and 30 pixels. You’ll be able to modify it to achieve your required results.
• the third worth is the minmax threshold for our last worth, based mostly on the second parameter.
  assuming our scrollY has a worth of 0, then loaderY worth is -48. At scrollY worth 30, loaderY is 0.

After that, let’s set standalone animations for our spinner that don’t depend upon the present worth of scrollY.

The useAnimation hook is kind of easy – it’s used for manipulating animations and assigning them to elements.

The animationVariants variable is our set of animation variants, doable to launch through the use of .begin() methodology of useAnimation return. startLoading and endLoading are simply names for our variants. They’re totally customizable, so you’ll be able to name them no matter you need, however bear in mind, you will want to make use of these completely different names when calling the .begin() methodology.

loadingAnimation and animationVariants variables should be assigned to the part you need to animate. If you happen to don’t assign one in all them to a part, animations received’t set off.

Subsequent, we might want to set the onDragEnd operate, to deal with animations and refetch after pulling.

useSpring returns a category occasion of MotionValue. It’s routinely dealt with when handed to framer movement elements, however on this case, we might want to get and set some information to it manually.

Within the if assertion we verify if the y worth is the same as or better than the worth we set for our transforms, so our animation shall be constant. Then on true, we animate loading, run our refetch capabilities, and after fetching information, we animate the whole lot again.

We have now nearly the whole lot prepared, it’s time to set drag properties for our part. On this instance, we are going to solely use dragConstraints and dragElastic however you’ll be able to modify these freely.

WithdragConstraints our factor is aware of to respect set boundaries. For high and backside set to 0, by default components will return to their default place however they are going to be dragable outdoors it. It’s a fascinating impact for dragging to the underside however not likely for dragging to the highest. That’s the place the dragElastic property is useful. We are able to modify the facility of drag outdoors the constraints, the place 0 isn’t any drag in any respect and 1 is the max drag energy. 

If dragElastic is an object, then undefined instructions will routinely be set to 0.

Okay, just one factor left – creating elements and placing the whole lot collectively

Drawer implementation

A drawer or sidebar menu is a standard request in net apps, cell and desktop ones, with Framer Movement you’ll be able to obtain it simply. To create Drawer performance we’ve got used the next framer-motion options:

• Variants,
• AnimatePresence,
• useCycle,
• preliminary, animate, exitproperties of the movement part.

To implement mount/unmount animation of the Drawer part we used the AnimatePresence part from Framer Movement that runs animation for each baby with a novel key with preliminary, animate, and exit properties declared like within the instance under:

• preliminary – preliminary animation state, 
• animate– a state that’s current when a part is being mounted,
• exit– state utilized when unmounting part.
• movement.div and movement.a is a directive that enriches common html tags or React Parts with movement conduct as described within the introduction.

JSX presents a Drawer part across the drawer apart part that may be mounted and unmounted with an animation.

For inside drawer animations, we used Variants to animate an inventory of drawer objects. To outline variants you should declare two states, one for enter state and the opposite for exit. We used variants relatively than preliminary/exit/animate to orchestrate animation for kids by assigning the identical open, closed names for variants.

Staggering youngsters animation is a pleasant performance. We assigned the identical variant names to each div and <a> components, so the anchor factor animation is orchestrated to fireside after the div factor is seen, and the subsequent baby of div shall be delayed 0.2s after the earlier one.

The final step is simply utilizing this part on our web page, coalescing it with state administration (like within the code instance under) and we’re finished.

For switching between open and closed states we used the tremendous cool utility `useCycle` that permits you to cycle between values. In our case, we’d like false and true which signifies if the drawer is open.

As you’ll be able to see it’s fairly easy to attain this drawer impact. 

Transitions between pages (AnimatePresence, Little one animations, Routing)

Transitions between pages enrich the appliance with a novel really feel and make the person engaged as an alternative being uninterested in uninteresting loading screens and even worse, empty pages. 

Framer movement permits us to simply create transitions between pages through the use of AnimatePresence within the customized TransitionEffect part.

The subsequent step is to make use of this TransitionEffect part in our _app.tsx that wraps each Subsequent.js web page to offer the identical animation for each web page.

We have now created a fancy transition impact simply to play a little bit bit with prospects however you’ll be able to animate opacity, x-axis, and many others. for a smoother software circulate than prompt web page change.

As you’ll be able to see, we’ve got used related functionalities, e.g variants – they’re versatile, permitting us to play orchestrated animations like scaleUp, out, scaleDown, middle. That offers us quite a lot of freedom concerning the implementation of correct animation.

Final however not least – useReducedMotion hook detects if the person prefers decreased movement and even no animations in any respect.  

We must always think about this an accessibility problem as a result of some customers endure from varied disabilities equivalent to epilepsy, and flashy animations might set off them. Our buddy, Marcin Gajda, wrote a really helpful article on sensible enhancements for animation accessibility. Ensure that to offer it a go!

Framer movement capabilities linked with Subsequent.js routing made our Transitions in web page look tremendous cool, you’ll be able to try and play with the code under.

Framer Movement advantages

Simply to sum up the whole lot we realized at present:

• Implementing interactive and animated elements will increase person engagement.
• Animations give extra time to load the info with out boring or irritating your customers.
• With customized animations, your app turns into distinctive and stands out out of your rivals. 
• Framer Movement is the undisputed winner relating to animation efficiency.
• Your software will obtain an awesome Lighthouse rating.
• Because of world helper capabilities, the answer can simply disable or cut back animations for customers preferring apps with out transferring components.
• Accessibility-friendly for individuals with varied disabilities that require our assist to browse the online with out being triggered by intrusive animations. Our workmate, Marcin Gajda, wrote a chunk devoted to enhancements in animation accessibility. Extremely suggest! 
• Framer Movement gives an wonderful developer expertise that speeds coding and frees up quite a lot of builders’ time to give attention to different precedence duties.
• Consumer satisfaction and distinguished model can get your app well-known by successful design trophies like Awwwards. 

Zero code, most pace. framer-motion can do way more than this!

Framer Movement didn’t pay us for endorsement however we like this resolution a lot that we’ll let you know about some further superior options anyway. Perhaps you’ll discover some further arguments to persuade your shareholders that animations are THE factor now.

Structure animations

Permit to animate utilizing CSS structure variables, e.g. align-items: flex-end → flex-start, that below the hood are dealt with with transforms, visibly boosting efficiency.

Drag animations

Extensively understood drag animations: velocity assist, dragging whereas respecting the guardian factor so it doesn’t transcend the borders, spring impact, and extra.

Utility hooks for animations 

Globally animating selectors or chosen components with useAnimate, assigning drag management for animated components with useDragControls, and detecting whether or not a given factor is within the viewport. The latter is well-optimized and doesn’t push per-scroll renders.

Group animations

Creating group animations and shifts to animate transitions throughout your entire grid.

We’ve used this for my very own mission for rendering a calendar with focusable days to point out particulars. We are able to confidently say that the outcomes had been fairly wonderful.

3D animations

You’ll be able to connect with React Three Fiber to make 3D animations with framer-motion logic. We have now already described this course of within the Rendering 3D in React made simple with react-three-fiber article.

Accessibility

At The Software program Home, we be sure that the software program we launch is designed for all customers. Framer Movement accessibility information reveals dealing with animations in regards to the person’s accessibility preferences set within the browser.