How to create your website landing logo with framer-motion

Are you building your own website, or working on a project where you want to make a robust landing page?

This article is for this purpose, where we will go through very minimal and easy steps to do a logo that will show, animate and fade with a cinematic way.

In this tutorial we will work with react and with the support of framer-motion package, everything will go smooth and easy.

In your App.js component

import Form from "./components/Form";
import Header from "./components/Header";

function App() {
    return (
        <div className="h-screen flex justify-center items-center">
            <Header />
            <Form />
        </div>
    );
}

export default App;

the form component is not important, because it could be anything, one of the possible things is the rest of your app.

In Header.js component

import { useEffect, useState } from "react";
import Logo from "./Logo";

export default function Header() {
    const [isVisible, setIsVisible] = useState(true);

    useEffect(() => {
        setTimeout(() => {
            setIsVisible(false)
        }, 4000);
    }, [])

    return (
        <div>
            {isVisible && <Logo />}
        </div>
    )
}

the settimeout will assure that the logo will only appear once, which is on the first load of the page.

In Logo.js component

import { AnimatePresence, motion } from "framer-motion";

const svgVariants = {
    initial: {
        rotate: -360
    },
    animate: {
        rotate: 0,
        transition: {
            duration: 1
        }
    },
    exit: {
        rotate: -180
    }
}

const pathOneVariants = {
    initial: {
        opacity: 0,
        pathLength: 0
    },
    animate: {
        opacity: 1,
        pathLength: 1,
        transition: {
            duration: 2,
            ease: 'easeInOut'
        }
    }
}

const pathTwoVariants = {
    initial: {
        opacity: 1,
        pathLength: 1
    },
    animate: {
        opacity: 0,
        pathLength: 0,
        transition: {
            duration: 2,
            delay: 2,
            ease: 'easeInOut'
        }
    }
}



export default function Logo() {
    return (
        <AnimatePresence>
            <motion.div className="fixed top-0 left-0 w-full h-full bg-slate-300 flex justify-center items-center">
                <motion.svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" viewBox="0 0 192.755 192.756"
                    className="rounded-3xl"
                    variants={svgVariants}
                    initial="initial"
                    animate="animate"
                    exit="exit"
                >
                    <motion.g fill-rule="evenodd" clip-rule="evenodd">
                        <motion.path fill="#fff" d="M0 0h192.755v192.756H0V0z"
                            variants={pathOneVariants}
                        />
                        <motion.path d="M127.986 70.51v7.505l-63.217 28.846v-7.743l54.357-24.873L64.769 49.4v-7.744l63.217 28.854zM64.769 122.25v-7.495l63.217-28.852v7.74L73.654 118.5l54.332 24.859v7.741l-63.217-28.85z"
                            variants={pathTwoVariants}
                        />
                    </motion.g>
                </motion.svg>
            </motion.div>
        </AnimatePresence>
    )
}

Here i just used a free svg I found online, framer-motion package with the variants that specify the animation on enter and on exit as well as the transition between both.

Refresh your page, and on every refresh you will find the landing logo, Viola!

I hope you found this article beneficial, and I advice you to look more in the docs of the great framer-motion.