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