Animating Tailwind Transitions on Page Load

Animating Tailwind Transitions on Page Load

Written by Tony Lea on Sep 3rd, 2020 ・ Views ・ Report Post

Tony Lea Visit User Profile

Tailwind transitions classes gives you the ability to animate elements with very little effort. The only problem is that you can't implement animations using the transition classes alone.

In this tutorial, you will learn how we can solve this with some simple javascript.

A Quick Example

Take a look at this code, which will toggle a simple box from .scale-0 to scale-100:

<button id="showBox" class="bg-gray-200 mb-4 p-2">Show Box</button>
<div id="box" class="w-32 h-32 bg-red-500 block transform transition-all duration-150 ease-out scale-0"></div>

<script>
    document.getElementById('showBox').addEventListener('click', function(){
        document.getElementById('box').classList.remove('scale-0');
        document.getElementById('box').classList.add('scale-100');
    });
</script>

Here is a quick codepen example, click the showBox button to see the animation:

Pretty cool, right? But what if want wanted to swap classes on page load. Well, we could easily do that with javascript and data attributes.

Toggling Transition Classes

If you need a quick solution for replacing classes when the user lands on your page you can use the following javascript solution:

document.addEventListener("DOMContentLoaded", function(){
    var replacers = document.querySelectorAll('[data-replace]');
    for(var i=0; i<replacers.length; i++){
        let replaceClasses = JSON.parse(replacers[i].dataset.replace.replace(/'/g, '"'));
        Object.keys(replaceClasses).forEach(function(key) {
            replacers[i].classList.remove(key);
            replacers[i].classList.add(replaceClasses[key]);
        });
    }
});

This will allow you to add the following data attribute to any element:

data-replace="{ 'replace-this': 'with-this' }"

And it will automatically replace the first value with the second one. You can also comma separate the attribute like so:

🤩 Our Amazing Sponsors 👇
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. 
data-replace="{ 'replace-this': 'with-this', 'and-replace-this': 'with-this' }"

Here is a code element with that data attribute:

<h1 
    class="font-black text-6xl block duration-500 relative transform transition-all translate-y-12 ease-out" 
    data-replace='{ "translate-y-12": "translate-y-0" }'
    >
    Hells to the Yeah
</h1>

And we would end up with the following example (you may need to rerun the codepen to see the animation):

Now, you'll be able to add the data-replace attribute to any element to easily swap classes with very minimal javascript. You could minify that functionality and it would be under 0.3kb.

Take a look at the cool stuff you can do when you add this attribute to a few elements (if you don't see the animation, click the rerun button)

Alternative Solutions

You could always turn this into an animation by extending the Tailwind Animation classes, and that would be a good option for creating resusable animations; however, if you only need a few simple and subtle animations, the solution presented in this tutorial might be exactly what you need.

Conclusion

Tailwind transition and animation utility classes make animating your elements easier than ever before.

Slight animations can give your site a better user experience. So, be sure to head on over to the Tailwind Transition and Animation sections and learn more about them.

Comments (0)