Software Website Design

When you’re eager to learn and understand a new framework, the best thing to do is to make a project for fun, and explore!

This article speaks on a TailwindCSS / Next.JS website I developed for fun, to explore and learn the frameworks in depth. Let's take a look at how I achieved the pageLoad animations:

const variantPrimary = {
  hidden: { opacity: 0 },
  visible: { opacity: 1, transition: { delay: 0.25, duration: 1 } },
}

const variantSecondary = {
  hidden: { opacity: 0 },
  visible: { opacity: 1, transition: { delay: 0.25, duration: 1 } },
}

const variantThird = {
  hidden: { opacity: 0 },
  visible: { opacity: 1, transition: { delay: 0.5, duration: 1 } },
}

const motionProps = {
  initial: 'hidden',
  animate: 'visible',
}

In the code presented above, I achieved a desired "Fade In" loading animation using the powerful and super awesome library Framer Motion. I'm particularly fond of the smooth image fade animation upon page load. I highly recommend Framer Motion for high quality industry standard animations, friendly user interactions that seem to pop to life, and more.

Framer Motion in action

Placing and rendering Framer Motion into action is super easy, let's take a look at how it works!

Shown below, you can see that once you input the Framer Motion variants from the above JavaScript code, you simply place the propertyName in the JSX as follows:

<motion.div variants={variantThird} {...motionProps}>
  <div className="mt-3 sm:ml-3 sm:mt-0">
    <a
      href="#"
      className="hover:bg-rose-650 flex w-full select-none items-center justify-center rounded-md border border-transparent bg-rose-700 px-8 py-3 text-base font-medium text-rose-50 md:px-10 md:py-4 md:text-lg"
    >
      Conference Event
    </a>
  </div>
</motion.div>

<motion.nav animate={isOpen ? "open" : "closed"} variants={variants}>
  <Toggle onClick={() => setIsOpen((isOpen) => !isOpen)} />
  <Items />
</motion.nav>;

Shown above, you can also directly work with Framer in functionality components to achieve highly functionality apps with smooth animations, all while maintaining readable and consistent code.

Framer Motion on the backend

In comparison to GSAP, Framer Motion uses a declarative approach for animations. This makes code much more understandable, All while not sacrificing any performance. Impressive, innit? To better understand how Framer works, I've created a 3 step outline on how exactly animations render on the DOM:

1. Replacing HTML and populating motion elements
2. Animate state upon mount
3. Element pixel movement

In the first step, when you specify motion.div, Framer Motion replaces all HTML and SVG elements with properties that define DOM element behavior. The next step forces this into live action. Once ran, the library begins to instruct all the replaced elements to run on the state mount, and that activates step three, when the entire element is then told to move forward with pixel movement.

<motion.div 
  animate={{
    y: '1337px'    
  }}
>
Weeehoo, I'm animated!
</motion.div>;

Here's a great tutorial I scavenged for on YouTube, if you are interested in getting a basic understanding on the library: Click to watch moving pixels