Make animated landing page in React

7 min readFeb 6, 2023

Boilerplate setup

yarn create vite

yarn create vite

2. Install tailwind

yarn add -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

> configure your template paths, Add the paths to all of your template files in your tailwind.config.cjs file.

content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],

> Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

> For instance

<h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>

> Update colors

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        coffee: "#E1DFD8",
        "verge-black": "#131313",
      },
    },
  },
  plugins: [],
}

<div className="bg-coffee text-verge-black">
 </div>

components/Header

const Header = () => {
  return (
    <header className="w-full text-2xl flex  bg-clip-padding backdrop-filter backdrop-blur-xl bg-opacity-60  items-center justify-between p-6 bg-coffee fixed top-0 right-0">
      <a href="/">Hugo</a>
      <a href="">Contact</a>
    </header>
  )
}

export default Header

components/HeroIntroTitle

> install clsx,motion

yarn add motion,clsx

import clsx from "clsx"
import { animate, inView, stagger } from "motion"
import { useEffect } from "react"

type AnimatedLetterProps = {
  letter: string
  alignment: "left" | "right"
}
const AnimatedLetter = ({
  letter,
  alignment = "left",
}: AnimatedLetterProps) => {
  return (
    <span
      className={clsx(
        "inline-block  text-[12vw] leading-[12vw] opacity-0 uppercase font-semibold",
        {
          "character-stagger-animation-left": alignment === "left",
          "character-stagger-animation-right": alignment === "right",
        }
      )}
    >
      {letter}
    </span>
  )
}
const HeroMain = () => {
  useEffect(() => {
    inView(".character-stagger-animation-container", () => {
      animate(
        ".character-stagger-animation-left",
        {
          transform: "none",
          opacity: 1,
        },
        {
          delay: stagger(0.1, {}),
          duration: 2,
        }
      )
    })
    inView(".character-stagger-animation-container", () => {
      animate(
        ".character-stagger-animation-right",
        {
          transform: "none",
          opacity: 1,
        },
        {
          delay: stagger(0.1, {}),
          duration: 2,
        }
      )
    })
    return () => {}
  }, [])
  return (
    <div className="p-10 h-screen flex items-center justify-center   relative">
      {/* Intro title */}
      <div className="flex flex-col py-24 ">
        <div className="mx-auto flex flex-col ">
          <span className="inline-block character-stagger-animation-container leading-[12vw]">
            <AnimatedLetter alignment="left" letter="C" />
            <AnimatedLetter alignment="left" letter="r" />
            <AnimatedLetter alignment="left" letter="e" />
            <AnimatedLetter alignment="left" letter="a" />
            <AnimatedLetter alignment="left" letter="t" />
            <AnimatedLetter alignment="left" letter="i" />
            <AnimatedLetter alignment="left" letter="v" />
            <AnimatedLetter alignment="left" letter="e" />
          </span>
          <span className="inline-block character-stagger-animation-container leading-[12vw]">
            <AnimatedLetter letter="D" alignment="right" />
            <AnimatedLetter letter="e" alignment="right" />
            <AnimatedLetter letter="v" alignment="right" />
            <AnimatedLetter letter="e" alignment="right" />
            <AnimatedLetter letter="l" alignment="right" />
            <AnimatedLetter letter="o" alignment="right" />
            <AnimatedLetter letter="p" alignment="right" />
            <AnimatedLetter letter="e" alignment="right" />
            <AnimatedLetter letter="r" alignment="right" />
          </span>
        </div>
      </div>
    </div>
  )
}
export default HeroMain

Update css

.character-stagger-animation-left {
  transform: translateX(10vw) rotateX(90deg);
}
.character-stagger-animation-right {
  transform: translateX(-10vw) rotateX(-90deg);
}

components/About

import clsx from "clsx"
import { inView, animate } from "motion"
import { useEffect, useRef } from "react"

type AnimatedLineProps = {
  line: string
}
const AnimatedLine = ({ line }: AnimatedLineProps) => {
  const lineContainerRef = useRef<HTMLSpanElement>(null)
  const lineRef = useRef<HTMLSpanElement>(null)
  useEffect(() => {
    if (!lineContainerRef.current) return
    inView(lineContainerRef.current, () => {
      if (!lineRef.current) return
      animate(
        lineRef.current,
        {
          transform: "none",
          opacity: 1,
        },
        {
          duration: 2,
        }
      )
    })
    return () => {}
  }, [])
  return (
    <span
      className="overflow-hidden  text-3xl inline-block"
      ref={lineContainerRef}
    >
      <span
        className={clsx("text-3xl inline-block opacity-0 translate-y-[40px]")}
        ref={lineRef}
      >
        {line}
      </span>
    </span>
  )
}
const About = () => {
  return (
    <div className="h-screen mx-40  flex items-center justify-center ">
      <div className=" text-center">
        <div className="flex flex-col items-center justify-between">
          <div className="">
            <AnimatedLine line="I AM HUGO, CREATIVE DEVELOPER BASED IN FRANCE. I WORK AS A" />
            <AnimatedLine line="FREELANCER WITH AGENCIES, START-UPS AND INDIVIDUALS. I HAVE A" />
            <AnimatedLine line="FONDNESS FOR CLEAN DESIGNS, BEAUTIFUL TYPOGRAPHIES AND" />
            <AnimatedLine line=" INTERACTIVE DEVELOPMENT." />
          </div>
        </div>
      </div>
    </div>
  )
}

export default About

components/services

import { inView, animate } from "motion"
import { useEffect } from "react"

const TransformYAxisText = ({ title }: { title: string }) => {
  useEffect(() => {
    inView(".service-title-container", () => {
      animate(
        ".service-title",
        {
          transform: "none",
          opacity: 1,
        },
        {
          duration: 2,
          delay: 0.02,
        }
      )
    })
    return () => {}
  }, [])
  return (
    <span className="inline-block service-title-container leading-[4vw] overflow-hidden">
      <span className="service-title opacity-0 translate-y-[4vw] inline-block text-[4vw] leading-[4vw]  uppercase font-semibold">
        {title}
      </span>
    </span>
  )
}
const Services = () => {
  return (
    <div className="  flex flex-col h-screen  items-center justify-center">
      <div className="mx-auto">
        <div className="text-3xl">Services I can help you with</div>
        <div className="h-10"></div>
        <div className="flex flex-col">
          <TransformYAxisText title="art direction. branding." />
          <TransformYAxisText title=" iconography. illustration." />
          <TransformYAxisText title="logo design. motion" />
          <TransformYAxisText title=" ui. ux. websites." />
        </div>
      </div>
    </div>
  )
}
export default Services

components/selected-work

import { inView, animate, scroll } from "motion"
import { useEffect, useRef } from "react"

const SelectedWork = () => {
  const selectedWorkContainerRef = useRef<HTMLDivElement>(null)
  const selectedWorkRef = useRef<HTMLHeadingElement>(null)
  useEffect(() => {
    if (!selectedWorkContainerRef.current) return
    inView(selectedWorkContainerRef.current, () => {
      if (!selectedWorkRef.current) return
      scroll(
        animate(
          selectedWorkRef.current,
          { x: [-200, 200] },
          {
            duration: 1.4,
          }
        ),
        {
          target: selectedWorkRef.current,
        }
      )
    })
  }, [])
  return (
    <div
      className="h-screen overflow-hidden flex items-center justify-center "
      ref={selectedWorkContainerRef}
    >
      <h2 className="text-[12vw] uppercase" ref={selectedWorkRef}>
        Selected work
      </h2>
    </div>
  )
}
export default SelectedWork

components/work

Copy data in constants/index.ts

export const PROJECTS = [
  {
    title: "Coca cola x marshmallow",
    image: "https://images5.alphacoders.com/659/659089.jpg",
    url: "",
    prefix: "first",
  },
  {
    title: "Decor",
    image:
      "https://images.prismic.io/andy-2022/ecc90d70-51ea-4b63-9649-b8be0c1325a0_scavolini.jpg?auto=compress,format&rect=0,0,2400,1440&w=1920&h=1152",
    url: "",
    prefix: "second",
  },
  {
    title: "Tuscany",
    image: "https://images3.alphacoders.com/127/1276158.jpg",
    url: "",
    prefix: "third",
  },
  {
    title: "daily experiments",
    image:
      "https://cdn.shopify.com/s/files/1/0167/4484/products/white-1_1480x1836_crop_center.jpg?v=1595952757",
    url: "",
    prefix: "fourth",
  },
  {
    title: "Raws",
    image:
      "https://images.prismic.io/andy-2022/7be715a9-6bbf-47f6-99e7-e0c672d98d6d_raws.jpg?auto=compress,format&rect=0,0,2400,1440&w=1920&h=1152",
    url: "",
    prefix: "fifth",
  },
  {
    title: "Samsung",
    image:
      "https://duet-cdn.vox-cdn.com/thumbor/0x0:2040x1360/2048x1365/filters:focal(929x614:930x615):format(webp)/cdn.vox-cdn.com/uploads/chorus_asset/file/24058703/DSCF9357_2.jpg",
    url: "",
    prefix: "sixth",
  },
]

2. Update project

import clsx from "clsx"
import { animate } from "motion"
import { useState } from "react"
import { PROJECTS } from "../../constants"

interface IProject {
  title: string
  image: string
  url: string
  prefix: string
}
type ProjectProps = {
  project: IProject
  index: number
}
const Project = ({ project, index }: ProjectProps) => {
  const { image, title, url, prefix } = project
  const [activeImage, setActiveImage] = useState(-1)
  const handleOnMouseEnter = () => {
    setActiveImage(index)
    const activeImage = document.querySelector("." + prefix + "-image")
    if (!activeImage) return
    animate(
      activeImage,
      {
        opacity: 1,
        transform: "scale(1.2)",
      },
      {
        duration: 1.4,
      }
    )
  }
  const handleMouseLeave = () => {
    setActiveImage(-1)
    const activeImage = document.querySelector("." + prefix + "-image")
    if (!activeImage) return
    animate(activeImage, {
      opacity: 0,
      transform: "none",
    })
  }
  return (
    <div
      className={clsx("flex border-b-2 border-black py-24", {})}
      onMouseEnter={handleOnMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      <div
        className={clsx(
          prefix +
            "-image-wrapper flex items-center justify-between flex-1 mr-20 "
        )}
      >
        <h2 className={clsx("text-[4vw] uppercase", {})}>{title}</h2>
        <div className="overflow-hidden w-[420px] h-[256px] rounded-2xl">
          <img
            className={clsx(prefix + "-image", " rounded-2xl  opacity-0", {
              "opacity-100": activeImage === index,
            })}
            width={420}
            height={256}
            src={image}
            alt=""
          />
        </div>
      </div>
    </div>
  )
}
const Work = () => {
  return (
    <div className="mx-auto px-24 py-40 ">
      <div className="overflow-hidden">
        {PROJECTS.map((project, index) => (
          <Project key={project.title} project={project} index={index} />
        ))}
      </div>
    </div>
  )
}
export default Work

components/contact

type LinkProps = {
  url: string
}

const Link = ({ url }: LinkProps) => {
  return (
    <span className="text-2xl inline-block cursor-pointer  uppercase link-hover">
      {url}
    </span>
  )
}
const Contact = () => {
  return (
    <div className="flex flex-col h-screen  items-center justify-center ">
      <div className="mx-auto">
        <div className="text-3xl text-bright font-semibold">
          I am available now to work on project
        </div>
        <div className="h-10"></div>
        <h2 className="text-6xl leading-snug uppercase font-medium cursor-pointer link-hover">
          Send me an email
        </h2>
        <div className="h-40"></div>
        <span className="flex flex-row items-start space-x-10">
          <Link url="dribble" />
          <Link url="instagram" />
          <Link url="behance" />
          <Link url="linkedin" />
        </span>
      </div>
    </div>
  )
}
export default Contact

styles

/* link hover animation  */

.link-hover {
  position: relative;
  color: black;
  transition: color 0.95s cubic-bezier(0.19, 1, 0.22, 1);
}
.link-hover:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.075em;
  min-height: 1px;
  transform: scaleX(1);
  transform-origin: left;
  background-color: currentColor;
  transition: transform 0.95s cubic-bezier(0.19, 1, 0.22, 1);
}
.link-hover:not(:hover) {
  color: black;
}
.link-hover:not(:hover):before {
  transform-origin: right;
  transform: scaleX(0);
}

Smooth scrolling

yarn add @studio-freight/lenis

useEffect(() => {
    const lenis = new Lenis({
      duration: 1.6,
    })
function raf(time: number) {
      lenis.raf(time)
      requestAnimationFrame(raf)
    }
    requestAnimationFrame(raf)
  }, [])

> styles

html {
  scroll-behavior: initial !important;
}
html,
body {
  min-height: 100%;
  height: auto;
}

Hide scrollbar

/* hide scrollbar */
*::-webkit-scrollbar {
  width: 0px;
}
*::-webkit-scrollbar-track {
  background: #e0b3d1;
}
*::-webkit-scrollbar-thumb {
  background-color: #450adf;  border-radius: 4px;
  border: 0px solid #e0b3d1;
}

Make animated landing page in React

Boilerplate setup

components/Header

Written by Om