An Interest In:
Web News this Week
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
Some of Our Sources
- Techcrunch
- Joshua Blankenship
- Smashing Apps
- Abduzeedo
- Creative Curio
- My Ink Blog
- Fudge Graphics
- Line 25
- Dev To
- Hashedout
Help Webnuz
Referal links:
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.
Original Link: https://dev.to/omardiaa48/how-to-create-your-website-landing-logo-with-framer-motion-2bhf
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To