Creating Interactive Hover Effects with GSAP and SplitType
Taiwo Shobo
Posted on August 8, 2024
Introduction
In modern web development, creating engaging and interactive animations can significantly enhance user experience. The GreenSock Animation Platform (GSAP) is a powerful tool for creating high-performance animations. Combined with SplitType, a text splitting library, developers can create dynamic text animations with ease. In this article, we’ll explore how to create a hover effect using GSAP and SplitType.
Check out the Video on YouTube
Project Structure
We'll be working with three files:
- index.html - The structure of our webpage.
- style.css - The styling of our webpage.
- main.js - The script where GSAP and SplitType are used for animations.
HTML: Structuring the Webpage
The HTML file provides the basic structure for our project. We have a title, a header, and a container with several colored boxes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GSAP Practice</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1 id="hover-text">onHover effect with GSAP</h1>
<div id="box-container">
<div class="box green"></div>
<div class="box purple"></div>
<div class="box red"></div>
<div class="box navy"></div>
<div class="box orange"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://unpkg.com/split-type"></script>
<script src="main.js"></script>
</body>
</html>
-
Heading (
h1): The heading displays a title with the IDhover-text, which will be animated using SplitType and GSAP. -
Box Container (
div#box-container): This container holds five different boxes with varying background colors. These boxes will have hover animations applied to them using GSAP.
CSS: Styling the Webpage
The CSS file defines the styles for the webpage, including the layout of the boxes and the initial appearance of the text.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #eee;
}
h1 {
text-align: center;
margin-bottom: 40px;
color: black;
font-size: 3rem;
}
#box-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 20px;
cursor: pointer;
}
.box {
height: 100px;
width: 100px;
}
.box.green {
background-color: green;
}
.box.purple {
background-color: purple;
}
.box.red {
background-color: red;
}
.box.navy {
background-color: navy;
}
.box.orange {
background-color: orange;
}
.char {
transform: translateY(-115px);
transition: transform 0.5s;
}
- Global Styles: Resetting margin, padding, and box-sizing to ensure consistent styling across browsers.
- Body: Setting a light grey background for the entire page.
-
Heading (
h1): Center-aligning the text with a large font size and adding space below it. -
Box Container (
#box-container): Aligning the boxes horizontally in the center of the page with some spacing between them. -
Boxes (
.box): Defining the height and width of each box and applying different background colors. -
Characters (
.char): Initially setting each character’s position above its final position. The transition will make the animation smooth when the characters fall into place.
Check out the Video on YouTube
JavaScript: Adding Animations with GSAP and SplitType
The JavaScript file is where the magic happens. We use GSAP to create animations and SplitType to split the text into individual characters for more granular animation control.
/* Working on the text */
const myText = new SplitType('#hover-text')
gsap.to('.char', {
y: 0,
stagger: 0.05,
delay: 0.2,
duration: 1,
})
/* Working on the hover effect using GSAP */
const boxes = document.querySelectorAll('.box')
boxes.forEach((element) => createHover(element))
function createHover(element) {
var tl = gsap.timeline({ paused: true, reversed: true })
tl.to(element, { opacity: 1, duration: 0.3, height: 150 })
element.addEventListener('mouseenter', () => {
tl.reversed() ? tl.play() : tl.reverse()
})
element.addEventListener('mouseleave', () => {
tl.reversed() ? tl.play() : tl.reverse()
})
}
Text Animation with SplitType and GSAP
-
SplitType: The
SplitTypelibrary is used to split the text in the#hover-textelement into individual characters. This allows for independent control of each character. -
GSAP Animation: GSAP's
gsap.to()method is then used to animate these characters. Each character animates by moving vertically into its place (y: 0) with a slight delay between each (stagger: 0.05). The animation begins with a small delay (delay: 0.2) and lasts for 1 second (duration: 1).
Hover Effect Animation on Boxes
-
Selecting Boxes: We select all elements with the class
.boxand iterate over them to apply the hover effect. -
Creating Hover Timeline: For each box, a GSAP timeline is created. This timeline is paused initially (
paused: true) and starts in the reversed state (reversed: true). -
Hover In (
mouseenter): When the mouse enters a box, the timeline plays forward, increasing the box’s height to 150px and slightly increasing its opacity. -
Hover Out (
mouseleave): When the mouse leaves the box, the timeline reverses, returning the box to its original state.
Conclusion
This simple project demonstrates how to create engaging animations using GSAP and SplitType. The hover effect applied to the boxes and the text animation adds a layer of interactivity that can make a webpage more dynamic and appealing. By understanding and leveraging the power of GSAP, you can create smooth, high-performance animations that enhance the user experience on your websites.
Whether you’re a beginner or an experienced developer, experimenting with GSAP and SplitType will open up a world of creative possibilities in web animation.
Check out the Video on YouTube
Posted on August 8, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
