It refers to the technique of implementing animations that respond to user clicks, utilizing the Tailwind CSS for styling and layout, and JavaScript for adding dynamic behavior to the elements. This enhances user engagement and improves the overall user experience of the websites.
Table of Content
Using Tailwind Classes
- Animation Class: Added Tailwind CSS utility class animate-bounce to the button element which creates a bouncing effect when clicked.
- JavaScript: Utilized JavaScript to add and remove the animation class. The class is added on click, triggering the animation, and removed after 500ms, ensuring the animation only occurs once per click.
Example: The below code uses Tailwind classes with JavaScript to animate the button on click.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
How to Make Animated Click Effect using
Tailwind CSS and JavaScript
</title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
</head>
<body class="flex justify-center
items-center h-screen bg-gray-100">
<button id="animatedButton"
class="bg-blue-500 hover:bg-blue-700 text-white
font-bold py-4 px-8 rounded transition-all
duration-300 transform hover:scale-105">
Click Me
</button>
<script>
const button = document.
getElementById('animatedButton');
button.addEventListener('click', () => {
button.classList.add('animate-bounce');
setTimeout(() => {
button.classList.
remove('animate-bounce');
}, 500);
});
</script>
</body>
</html>
Output:
Using Anime.js library
- JavaScript Animation Library: Included the Anime.js library via CDN to enable advanced animations.
- Enhanced Animation: Expanded the animation by incorporating additional properties such as rotate. The button now rotates by 1 turn during the animation sequence.
- Anime.js Configuration: Defined multiple scale values to create a more dynamic scaling effect. The button scales up to 1.2 times its original size smoothly over 400ms, then returns to its original size.
Example: The below code uses Anime.js library to animate the button on click.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
How to Make Animated Click Effect
using Tailwind CSS and JavaScript
</title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
</head>
<body class="flex justify-center items-center
h-screen bg-gray-100">
<button id="animatedButton"
class="bg-blue-500 hover:bg-blue-700 text-white
font-bold py-4 px-8 rounded transition-all
duration-300 transform hover:scale-105">
Click Me
</button>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js">
</script>
<script>
const button = document.
getElementById('animatedButton');
button.addEventListener('click', () => {
anime({
targets: button,
scale: [
{
value: 1, duration: 100,
easing: 'easeInOutQuad'
},
{
value: 1.2, duration: 400,
easing: 'easeInOutQuad'
},
{
value: 1, duration: 100,
easing: 'easeInOutQuad'
}
],
rotate: {
value: '1turn',
easing: 'easeInOutSine'
}
});
});
</script>
</body>
</html>
Output:
