ALL ABOUT FRAMER-MOTION??

ANIMATION??

Animation is?the rapid display of a sequence of images to create an illusion of movement. The most common method of presenting animation is as a motion picture or video program. In simpler word; animation means giving life to our imagination.

ANIMATION PLAYS A VITAL ROLE IN TODAY'S TECHNOLOGIES, WE ALL ENCOUNTERED WITH CSS (CASCADING STYLE SHEET), through which animation is possible.

but, a new library has come up to our technologies ,which make the animation code more simpler and less time consuming.we will disscus about that library in our today's blog.

FRAMER-MOTION, the brother of react-js, lol! sounds funny right. IN practically, it is a library of react-js.

GETTING CONFUSED, CHILL I AM HERE TO KILL THOSE GERMS OF CONFUSION.

Framer Motion is?an animation library that makes creating animations easy. Its simplified API helps us abstract the complexities behind animations and allows us to create animations with ease.

EXAMPLE:

MOTION COMPONENTS?

These are the building blocks of Framer motion. Motion components are created by prefixing?motion?to your regular HTML and SVG element (e.g,?motion.h1). Motion components can accept several props, with the basic one being the?animate?prop. This prop takes in an object where we define the properties of that component we want to animate. The properties we define will be animated when the component mounts in the DOM.

Let’s animate an h1 text using Framer Motion. First, we install the framer-motion library and import?motion.

npm i framer-motion import { motion } from 'framer-motion';        

Then we convert the h1 into a motion component.

<motion.h1 animate={{x: 20, y: -20}}> This is a motion component </motion.h1>        

This will cause the?h1?to slide 20px to the right and move 20px up when it loads. When units aren’t added, calculations are done using pixels. However, you can explicitly set the units you want the calculations to be based on,?animate={{x: "20rem", y: "-20rem"}}>.

By default, a motion component will be animated from the state defined from its styles to those in the?animate?prop. However, if we wanted to, we could hijack and define the initial animation state of the component using the?initial?prop. While the?animate?prop is used to define the behavior of components when they mount, the?initial?prop defines their behavior before they mount.

If we want our h1 to come in from the left, we control that using the initial prop.

<motion.h1 initial={{x: -1000}} animate={{x: 20}}> This is a motion component </motion.h1>        

Now, when the?h1?mounts, it slides in from the left.

called?keyframes?in an array of values. Each value will get animated in sequence.

<motion.h1 initial={{x: -1000}} animate={{x: [20, 50, 0, -70, 40] }}> This is a motion component </motion.h1>
        

By default, a motion component will be animated from the state defined from its styles to those in the?animate?prop. However, if we wanted to, we could hijack and define the initial animation state of the component using the?initial?prop. While the?animate?prop is used to define the behavior of components when they mount, the?initial?prop defines their behavior before they mount.

If we want our h1 to come in from the left, we control that using the initial prop.

<motion.h1

??initial={{x: -1000}}

??animate={{x: 20}}>

??This is a motion component

</motion.h1>

The?transition?prop allows us to define how the animations occur. With it, we define how values animate from one state to another. Among other things, we can define the?duration,?delay, and?type?of animation using this prop.

<motion.h1 initial={{ x: -1000 }} animate={{ x: 0 }} transition={{ type: "tween", duration: "2", delay: "1" }}> This is a motion component </motion.h1>        

Value types

Motion can animate:

• Numbers:?0,?10?etc.
• Strings containing numbers:?"0vh",?"10px"?etc.
• Colors: Hex, RGB, HSLA.
• Complex strings containing multiple numbers and/or colors (ie?"10px 0 #000")

When animating to a non-animatable value like?"block", this value will be set instantly. By setting this value within?transitionEnd, this value will be set at the end of the animation.

<motion.div        

Transform

Transform properties are accelerated by the GPU, and therefore animate smoothly. They can be set and animated individually as:

• Translate shortcuts:?x,?y,?z
• Translate:?translateX,?translateY,?translateZ
• Scale:?scale,?scaleX,?scaleY
• Rotate:?rotate,?rotateX,?rotateY,?rotateZ
• Skew:?skew,?skewX,?skewY

Transform origin

transform-origin?has three shortcut values that can be set and animated individually:

• originX
• originY
• originZ

If set as numbers,?originX?and?Y?default to a progress value between?0?and?1.?originZ?defaults to pixels.

CSS variables

Motion can animate the value of CSS variables, and also read CSS variables as animation targets.

#

Using pre-defined CSS variables in animation

HTML?motion?components can animate to and from CSS variables, as long as that variable is defined on a component ancestor.

<motion.li animate={{ background: "var(--action)" }} />        

Custom components

Any component can be turned into a?motion?component by wrapping it with the?motion()?function.

The provided component?must?forward?ref?to the DOM element you want to animate.

In addition,?motion()?must not?be called inside a React render function.

const Component = React.forwardRef((props, ref) => (
    <div ref={ref} />
))

const MotionComponent = motion(Component)        

It's also possible to pass strings to?motion, which will create custom DOM elements.

// Will render <custom-element /> into HTML
const MotionComponent = motion('custom-element')        

By default, all?motion?props (like?animate?etc) are filtered out of the?props?forwarded to the provided component. By providing a?forwardMotionProps?config, the provided component will receive these props.

motion(Component, { forwardMotionProps: true })        

Performance

Motion animates values outside the React render cycle for increased performance.

Using?MotionValues instead of state to update visual properties will also avoid re-renders.

Gestures

A powerful gesture recognition system for the?browser.

Motion extends the basic set of event listeners provided by React with a simple yet powerful set of UI gesture recognisers.

It currently has support for hover, tap, pan, viewport and?drag gesture ?detection. Each gesture has a series of event listeners that you can attach to your?motion?component.

Animation helpers

motion?components provide multiple gesture animation props:?whileHover,?whileTap,?whileFocus,?whileDrag?and?whileInView. These can define animation targets to temporarily animate to while a gesture is active.

<motion.button
  whileHover={{
    scale: 1.2,
    transition: { duration: 1 },
  }}
  whileTap={{ scale: 0.9 }}
/>        

All props can be set either as a target of values to animate to, or the name of any variants defined via the?variants?prop. Variants will flow down through children as normal.

<motion.button
  whileTap="tap"
  whileHover="hover"
  variants={buttonVariants}
>
  <svg>
    <motion.path variants={iconVariants} />
  </svg>
</motion.button>        

motion?components automatically manage the interplay between these?while?props. So for instance, if hovering starts and stops while the tap gesture is active, the tap gesture receives priority and any properties defined on both will remain in their tapped state.

Likewise, if both gestures are defined and tapping ends, the component will know to animate either to the state defined in?whileHover, or the component's original state, depending on whether tapping ends inside or outside of the component.

Hover

The hover gesture detects when a pointer hovers over or leaves a component.

It differs from?onMouseEnter?and?onMouseLeave?in that hover is guaranteed to only fire as a result of actual mouse events (as opposed to browser-generated mice events emulated from touch input).

<motion.a
  whileHover={{ scale: 1.2 }}
  onHoverStart={e => {}}
  onHoverEnd={e => {}}
/>        

whileHover:?

Properties or variant label to animate to while the hover gesture is recognised.

<motion.div whileHover={{ scale: 1.2 }} />        

onHoveR:

Callback function that fires when pointer starts hovering over the component.

event:?MouseEvent

onHoverEnd(event, info):?void

Callback function that fires when pointer stops hovering over the component.

event:?MouseEvent

info:?EventInfo

<motion.div onHoverEnd={() => console.log("Hover ends")} />        

Scroll animations

How to create scroll-linked and scroll-triggered animations in Framer?Motion.

There are two predominant types of scroll animations, both of which can be achieved with Framer Motion.

Scroll-linked?animations are when the progress of an animation is directly tied to scroll progress.?Scroll-triggered?animations are when a normal animation is triggered when an element enters or leaves the viewport.

Scroll-linked animations

Scroll-linked animations are created using?motion values ?and the?useScroll?hook.

import { motion, useScroll } from "framer-motion"

function Component() {
  const { scrollYProgress } = useScroll();
  
  return (
    <motion.div style={{ scaleX: scrollYProgress }} />  
  )
}        

Scroll-triggered animations

Scroll-triggered animations are normal animations that start when an element enters or leaves the viewport.

The?whileInView?prop can be used to create scroll-triggered animations by defining a set of properties and, optionally, a transition, to animate to when the element is in view.

<motion.div
  initial={{ opacity: 0 }}
  whileInView={{ opacity: 1 }}
/>        

whileInView:?VariantLabels | TargetAndTransition

Properties or variant label to animate to while the element is in view.

once:?boolean

If?true, once the element has entered the viewport it will remain in the?whileInView?state. No further viewport callbacks will be triggered.

<motion.div
  initial="hidden"
  whileInView="visible"
  viewport={{ once: true }}
/>        

root:?RefObject<Element>

By default, the element will be considered within the viewport when it enters the window viewport.

Pass a?ref?to both an ancestor element and to?viewport.root?to use that ancestor element as the measured viewport instead.

function Component() {
  const scrollRef = useRef(null)
  
  return (
    <div ref={scrollRef} style={{ overflow: "scroll" }}>
      <motion.div
        initial={{ opacity: 0 }}
        whileInView={{ opacity: 1 }}
        viewport={{ root: scrollRef }}
      />
    </div>
  )
}        

Transition

A transition defines how values animate from one state to?another.

A?transition?defines the type of animation used when animating between two values.

<motion.div
  animate={{ x: 100 }}
  transition={{ delay: 1 }}
/>        

It can also accept props that define which type of animation to use a?Tween,?Spring?or?Inertia.

<motion.div
  animate={{ x: 100 }}
  transition={{ type: "spring", stiffness: 100 }}
/>        

staggerDirection:?number

The direction in which to stagger children.

A value of?1?staggers from the first to the last while?-1?staggers from the last to the first.

when:?false | "beforeChildren" | "afterChildren" | string

Describes the relationship between the transition and its children. Set to?false?by default.

When using variants, the transition can be scheduled in relation to its children with either?"beforeChildren"?to finish this transition before starting children transitions,?"afterChildren"?to finish children transitions before starting this transition.

Tween

type:?"tween"

Set?type?to?"tween"?to use a duration-based animation. If any non-orchestration?transition?values are set without a?type?property, this is used as the default animation.

duration:?number

The duration of the tween animation. Set to?0.3?by default, 0r?0.8?if animating a series of keyframes.

const variants = {
  visible: {
    opacity: 1,
    transition: { duration: 2 }
  }
}        

Spring

An animation that simulates spring physics for realistic motion.

This is the default animation for physical values like?x,?y,?scale?and?rotate.

type:?"spring"

Set?type?to?"spring"?to animate using spring physics for natural movement. Type is set to?"spring"?by default.

<motion.div
  animate={{ rotate: 180 }}
  transition={{ type: 'spring' }}
/>        

duration:?number

The duration of the animation, defined in seconds. Spring animations can be a maximum of 10 seconds.

If?bounce?is set, this defaults to?0.8.

Note:?duration?and?bounce?will be overridden if?stiffness,?damping?or?mass?are set.

<motion.div
  animate={{ x: 100 }}
  transition={{ type: "spring", duration: 0.8 }}
/>        

bounce:?number

bounce?determines the "bounciness" of a spring animation.

0?is no bounce, and?1?is extremely bouncy.

If?duration?is set, this defaults to?0.25.

Note:?bounce?and?duration?will be overridden if?stiffness,?damping?or?mass?are set.

THANK YOU FOR SPENDING TIME WITH MY BLOGS.I HOPE IT HELPS YOU TO UNDERSTAND THE BASIC ABOUT FRAMER-MOTION.

#ANIMATION

#WEB

#designing #LEARNING

#BLOGS TO #LEARN EVERYTHING WITH FUN @2022