Creating Animated Anchor Using Tailwind CSS Scaling Animation in React Website

Photo by Maik Jonietz on Unsplash

Trying to use animations in our ReactJS website because it looks so static? Don’t worry, we can solve this problem easily, thanks to Tailwind CSS!

Prologue

For starters, we can use scale animation in some events. For example, we might want to add an animation whenever the user hovers or clicking an anchor in our website. We might need many lines of CSS code with vanilla CSS, but with Tailwind CSS, we don’t need to use CSS at all! We can just include a few words in our CSS class(es).

The prerequisite of this guide:

1. Using React related framework and Tailwind CSS in your website project
2. Willing to continue reading (of course, duh haha)

Implementation

Let’s say we want to create every anchor in our website animated whenever we hover or click on it. First, create a new component called “AnimatedAnchor” by creating a new JS file called “AnimatedAnchor.js”.

import Link from 'next/link'

export default function AnimatedAnchor({ children, href, openInNewTab = true, className }) {
    const anchorProps = {
        href: href || undefined,
        target: openInNewTab ? "_blank" : undefined,
        rel: "noopener",
        className: className,
    };

    return (
        <div>
            <Link {...anchorProps}>{children}</Link>
        </div>
    );
}

Don’t worry about the Link part. For the code snippet, I use NextJS. But it’s almost similar in ReactJS that we can use it like this:

<div>
     <a {...anchorProps}>{children}</a>
</div>

Now, let’s add a few Tailwind CSS classes to animate the scale animation whenever the user hovers or click the element.

<!-- Add the className(s) below -->
<div className="transition-all hover:scale-110 active:scale-90 ease-in-out">
    <Link {...anchorProps}>{children}</Link>
</div>

What are these classes for?

transition-all // Use transition to make the animation smooth
hover:scale-110 // Scale the element by x1.1 whenever user hovers
active:scale-90 // Scale the element by x0.9 whenever user clicks
ease-in-out // Use ease in out for the transition

Usage

Implement it like when you use <Link> or <a> element in your website. The code snippet below is the example when I implemented this kind of animation in <Button> component.

import AnimatedAnchor from './AnimatedAnchor';

export default function Button({ children, href, openInNewTab=true }) {
    return (
        <AnimatedAnchor 
            className="bg-blue-600 dark:bg-blue-400 text-white dark:text-black font-semibold px-4 py-2 border-2 border-black"
            href={href}
            openInNewTab={openInNewTab}
        >
            {children}
        </AnimatedAnchor>
    );
}

Snippet source:

NextJS-KevinPortfolio/components/include/Button.js at f16c59f0d6aeb52f272e548e8f4e9d91f817d270 ·…

The result will be something like this (There’s a scaling animation on hover and on click):

AnimatedAnchor redirecting from my website to Behance website

Supporting Reduced Motion

Some users might have enabled reduced motion in their devices and we don’t want to irritate them because there are too many animations in our website. We have no choice but to implement reduce motion classes in our existing animations.

Add these classes:

motion-reduce:transition-none // Disable the transition
motion-reduce:hover:scale-100 // Ensures the scale will always be x1
motion-reduce:active:scale-100 // Ensures the scale will always be x1

These classes ensure that the normal scaling animation won’t run if users enabled reduce motion in their devices.

Results (With reduced motion on and off):

Reduced motion on (Left GIF) and Reduced motion off (Right GIF)

Epilogue

Before posting this, I used both framer motion and Tailwind CSS to achieve this, but I think it’s not necessary to use both, so I refactored, simplified my code and only use the one Tailwind CSS provided. Hope you’ll find this useful, thank you for reading!

Thank you for reading until the end. Please consider following the writer and this publication. Visit Stackademic to find out more about how we are democratizing free programming education around the world.