floating text animation using gsap

Animation is an easy way to make websites attractive. And one of the most interesting techniques in Text Animation is Floating Text Animation. In this text animation, the characters slowly float in the air.

In this tutorial, we will learn how to create this Floating Text Animation using GSAP(GreenSock Animation Platform). If you don't know about GSAP, then let us say that it is the most powerful animation libraries for the web.

Why do developers love GSAP? Because:

  • Fast - Animations run smoothly on all devices.
  • Flexible - You can animate almost anything. Like text, images, SVG, even complex timelines.
  • Simple - You get clean code without the headache of manual CSS keyframes.

We have used HTML, CSS and JS here. Let us get started.

Live demo:

Below is a live demo that will help you understand how the look floating animation.

HTML
CSS
JS
Result

HTML:

In html we will create an <h1> element. Inside this heading element write any text you want. Here I have written GreenSock.

<h1>GreenSock!</h1>

StyleSheet(CSS):

Centering the Text:

First we style the <body> so that the text is centered. We set display to flex and flex-direction to column to control positioning. Then we set align-items and justify-content to center so that the text is centered within the viewport.

We also set the body height to 100vh so that it always fills the entire height of the screen. And we set overflow to hidden so that the scrollbars don't appear when the text animates. Finally, we set the background to a dark red color (hex code #d52e3f).

body {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:100vh;
  overflow: hidden;
  gap:99px;
  background:#d52e3f;
}
Styling the Text:

Coming to the <h1> element, we start by setting its opacity to 0 which initially makes the heading invisible. It is often used when preparing animation effects.

Next we style the text color with a cream color using the hex code #fcedd8. For typography we choose clean sans-serif font family. And set font-optical-sizing to auto so that the type adjusts depending on the weight.

We then make the heavy font-weight css property to 900. And set the big font-size to 4rem to make the title stand out.

Finally we apply the text shadow:

We increase the X offset of the shadows by 2, meaning if the first one is 2px, the second one will be 4px, and so on, 6px, 8px. And similarly we increase the Y offset by 6.

  • 2px 6px 0 #eb452b (red color).
  • 4px 12px 0 #eaa034 (orange color).
  • 6px 18px 0 #45b49b (blue accent color).
  • 8px 24px 0 #017e7f (deep blue accent color).
h1 {
  opacity:0;
  color: #fcedd8;
  font-family: sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: 4rem;
  text-shadow: 2px 6px 0 #eb452b, 4px 12px 0 #eaa034, 6px 18px 0 #45b49b, 8px 24px 0 #017e7f;  
}

Javascript:

Adding external library:

The next step is to bring in the external library that will do our text animations. To do this, we add two <script> tags to our HTML document.

First we include the GSAP core library by linking to files hosted on unpkg.com. This gives us access to GSAP animation engine.

<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>

Next we include the SplitText plugin from unpkg.com. This plugin allows us to split any text into individual characters. Once split, each piece can be animated independently.

<script src="https://unpkg.com/gsap@3/dist/SplitText.min.js"></script>

Let us start by registering the SplitText plugin using "gsap.registerPlugin(SplitText)". This breaks our <h1> heading into smaller pieces.

Next we create a variable st that stores the result of splitting our <h1> into characters. Besides this we also initialize a timeline variable using "gsap.timeline()". For the colored text effect, we define another variable called shadow that holds the text shadow with multiple layers of different colors.

From here, we will start the actual animation:

  1. We first set the opacity of the <h1> element to 1.
  2. Then each letter from the split text is placed slightly above its normal position by setting yPercent to -60.
  3. The main animation lowers these characters with a yPercent of 60. At the same time we added -5 and 5 degrees for a natural oscillating effect.
gsap.registerPlugin(SplitText);
const st = SplitText.create("h1", { type: "chars" });
const timeline = gsap.timeline();
const shadow = "2px -6px 0 #eb452b, 4px -12px 0 #eaa034, 6px -18px 0 #45b49b, 8px -24px 0 #017e7f";

timeline
  .set("h1", { opacity: 1 })
  .set(st.chars, { yPercent: -60 })
  .to(st.chars, {
    duration: 1.4,
    ease: "power1.inOut",
    yPercent: 60,
    rotate: () => "random(-5,5)",
    stagger: {
      amount: 1.2,
      repeat: -1,
      repeatRefresh: true,
      yoyo: true
    },
    textShadow: shadow
  })
  .seek(99);

To make the animation engaging we use stagger. which animates each character one after another across 1.2 seconds.

We set the repeat to -1 to make the animation repeat infinitely. Then we set yoyo to true so that the text moves back and forth instead of suddenly resetting. Finally we apply the textShadow styling we defined earlier to enhance the colorful glow effect.

Now we chain these animations inside the timeline and set seek to 99 to ensure that the timeline is running.

Output:

Today we are ending the Floating Text Animation tutorial here, and if you have any questions about the Text Animation, you can share your feelings in the comments. You can follow our YouTube channel to get more updates about the CODEHEMU tutorial. I ended the tutorial Namaste🙏

Tags

Post a Comment

Post a Comment

Previous Post Next Post