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

Saurabh Bhan — Sun, 19 Jun 2022 05:06:17 +0000

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.

Memomization? how and the why in Javascript.

Saurabh Bhan — Thu, 09 Jun 2022 08:14:55 +0000

Memoization generally means to remember and in the world of programming a memoizing function is to make the function remeber the output value for a particular input, so if in future if the function is asked to run on the same input it delivers the results very fast as it already have the output for that input.

Let's take a look at the following diagram to understand better

in the diagram, we can see that if the function fib is memoizing(caching) the value for the calculations as the fibbonaci calculation are intense for higher numbers, we can see it only calculate once for that input and no matter how many time we run the function for the same input the output is given at an instant.

Heres the code for the above function.

const fib = (num) => {
    if(num < 2) return num
    return fib(num -1) + fib(num-2)
}

This is the memoize decorator function we will be using

export const memoize = (fn) => {
    const cache = {};
    return (...args) => {
        if (JSON.stringify(args) in cache) {
            return cache[JSON.stringify(args)];
        }
        const result = fn(...args);
        cache[JSON.stringify(args)] = result;
        return result;
    }
}

Running the function fib alone will occure in firing intensive calculations every single time. but if we wrap it in the memoize decorator fn it will calculate only one time and subsiquent runs will output results from the cache resulting in perfomant code and faster app.

const memoFib = memoize(fib)

That is how you call and memoize the fib function this can be used with any other function aswell.

We generally use memoization on pure functions and intensive calculations, it can also be used in API calls but it is not recommended.

tldr; memoization is basically caching the results so that they can retrieved later and faster without making new calculations, with memoization we trade speed with meemory.

Forem: Saurabh Bhan

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

Memomization? how and the why in Javascript.