Use Greensock Animation to Supercharge your Website

Greensock animation (GSAP) is amazing. Create animations that instantly make your website pop and add flair to your images and text. Paired with React and TailwindCSS, this workflow is seamless and crazy simple. Let me show you 👉

Overlay

Right when you load the website you are greeted with an overlay that swipes to the left. In React, I created a component that essentially is just a colored div. From there, I animated it out of frame.

  // intro component

  import React, { useEffect, useRef } from 'react'
  import gsap, { Expo } from 'gsap'

  const Intro = () => {
    let top = useRef(null)
    let bottom = useRef(null)

    useEffect(() => {
      gsap.to(top, 1.5, {
        delay: 0.2,
        left: '-100%',
        ease: Expo.easeInOut,
      })
    })
    return (
      <div className='min-h-screen overflow-hidden'>
        <div className="bg-gold absolute w-full h-full left-0 z-2" ref={(el) => {top = el}}/>
      </div>
    )
  }

  export default Intro

Let me explain. GSAP is a library that lets you animate basically anything. In React, we place the animation in the useEffect hook so the animation is performed whenever the page is reloaded. We use the useRef hook to set the div that we want to animate. The overlay div is just a blank, color filled div with the z index set to 2 so it would always be on top. I'm using custom Tailwind values (z-2 and bg-gold). The GSAP animation is simply calling the div and pushing it to the left -100%. Expo is just a GSAP class that makes the animation ease in and out prettier.

Images and Text fade in

The images and text are done essentially the same way. I just animated them and plopped the Intro component right on top.

  // index.js

  import React, { useRef, useEffect } from 'react'
  import Layout from '../components/layout'
  import Intro from '../components/intro'
  import gsap, { Power4 } from 'gsap'

  const Index = () => {
    let main = useRef(null)
    let img = useRef(null)

    useEffect(() => {
      gsap.to(main, 2.8, {
        delay: 1.8,
        opacity: 1,
        y: 16,
        ease: Power4.easeOut,
      })
      gsap.to(img, 2.8, {
        delay: 2,
        opacity: 1,
        y: 16,
        ease: Power4.easeOut,
      })
    })

    return (
      <Layout title="Default">
        <div className="w-full h-screen bg-dark text-white flex items-center">
          <Intro />
          <div className="container max-w-5xl mx-auto grid grid-cols-2 ">

            <div className="px-6 opacity-0" ref={(el) => {main = el}}>
              // Text Here
            </div>

            <div className="px-6 opacity-0" ref={(el) => {img = el}}>
              // Image Here
            </div>

          </div>
        </div>
      </Layout>
    )
  }

  export default Index

Here i did the same thing. Set the divs to different variables using useRef, and animated them on the page load. Notice how I delayed them a bit to wait for the intro overlay animation to be done (🧠). Also, to animate the text and image fading in, I had to set the opacity to 0 in the classes and animate the opacity going to 1. Just remember that when you're animating your own site.

For each div that you are going to animate they must have their own variables.

Thats it! You have a completely animated website. GSAP is amazing!! TailwindCSS just makes it even easier.

Follow me on twitter for more updates and tips!