framer-motion を使用してウェブサイトのランディング ロゴを作成する方法

独自の Web サイトを構築していますか、それとも堅牢なランディング ページを作成するプロジェクトに取り組んでいますか?

この記事はこの目的のためのもので、映画のような方法で表示、アニメーション化、フェードするロゴを作成するための非常に最小限で簡単な手順を説明します.

このチュートリアルでは、react を使用し、framer-motion パッケージのサポートにより、すべてがスムーズかつ簡単になります.

App.js コンポーネント内

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;

フォーム コンポーネントは重要ではありません.それは何でもかまいません.考えられることの 1 つは、アプリの残りの部分です.

Header.js コンポーネント内

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>
    )
}

settimeout は、ロゴがページの最初の読み込み時に一度だけ表示されることを保証します.

Logo.js コンポーネント内

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>
    )
}

ここでは、オンラインで見つけた無料の svg を使用しました.これは、開始時と終了時のアニメーション、および両方の間の遷移を指定するバリアントを含むフレーマーモーション パッケージです.

ページを更新すると、更新するたびにランディング ロゴの Viola が表示されます.

この記事がお役に立てば幸いです.偉大なフレーマーモーションのドキュメントをもっと見ることをお勧めします.