Framer 101 | Basics and How to Start with Framer Motion.

The web is full of beautiful websites and while browsing a few you sometimes think how cool would that be if I can make something like that, right? I am starting this Framer Weekly series where I go over some of the animations and interactions I see over the web and try to recreate them or share some of the tips and tricks of building beautiful websites with Framer motion.
This will be the first post in the series where we will learn about the basics of animations and frame motion, how to implement them and how animation works.

I will be using the following stack

• NextJS
• Framer-motion
• TailwindCSS

if any additional thing is used I will make sure to add and explain that.

Let's start by initialising a repo and a next project

npx create-next-app framer-weekly with-tailwindcss

by doing so we will have a starter nextjs project.

Let us dive into animations now.
Animating an element with framer-motion have three basic parts

• Initial
  This is the initial stage at which we define how the element will be positioned on the screen at the initial load.

• Animate
  This is the animation stage, this depicts the component mount stage, once the component has been mounted this is what the element will do

• Exit
  This is similar to component unmounting while unmounting the component perform these.

These are the basic 3 things you need to take care of while animating an element on the screen. all of these are passed to the framer-motion component as props.

Here is a basic animation for your reference.

framer motion converts every HTML element to a framer component just by adding motion. infront of the element like this

<motion.div></motion.div>

to use the above import motion component like this

import { motion } from 'framer-motion'

without the motion part, you will not be able to add those 3 props above to the component.

The above 3 props are objects and take any CSS value you would like to change/animate.

intial = {{
      opacity: 0,
      x: 10,
    }}
animate = {{
      opacity: 1,
      x: 100,
    }}

code above when passed to the motion component will animate the opacity and x position of the targeted element.

These were the basics of framer motion, in the next post we will learn about Variants, staggering children, and how we can go about creating this beautiful text animation.

If you like and would love to learn more about creating these, please consider following me here and on Twitter as well.