How to recreate this animated footer detail from L贸vi

4th Apr 2024銉3 min read

How to recreate this animated footer detail from L贸vi

What we want to recreate

The juicy lovi.care website has been doing the rounds recently on Design Twitter, and it鈥檚 easy to see why.

To introduce the product, they use a plethora of slick micro interactions that take you from ignorant to excited in seconds.

Don't like reading?

Check out the video version

Tucked away at the end of the page, after the impressive scroll/framer-motion driven animations have stolen your breath away, there is one more detail I鈥檇 like to focus on.

It鈥檚 L贸vi's take on the much-love 鈥淢ade in鈥︹ tagline.

How they did it

At first glance, it looks like there might be some pretty complex CSS animations happening under the surface to create the rippling effect of the water.

But when we dig a little further, we find there鈥檚 very little complexity at work. The effect is created by an animated GIF clipped to the text.

Follow along and see just how easy it is to recreate.

The animated GIF behind the animated text in the footer of the L贸vi website

The animated GIF behind the text

How to recreate it


1) Start your HTML file

You don鈥檛 need any fancy frameworks to get this working, just spin up a HTML file in your favourite text editor and open the file in the browser.

We鈥檒l start off by creating our HTML page complete with a body and the H1 title that we鈥檙e going to be styling.

Let鈥檚 mix things up a little by straying from the L贸vi example slightly. Where they build the product by the sea in Cyprus, let鈥檚 say our product is made in the desert in Morocco.

<html>
  <head>
  </head>
  <body>
    <h1>Made in the desert in Morocco</h1>
  </body>
</html>

2) Add styles to body to center

This is a completely optional step but I like to centre the text in the page so we can see what we鈥檙e doing a little better.

Well go ahead and apply flexbox styling to `body` in order to center our `h1`.

<html>
  <head>
    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <h1>Made in the desert in Morocco</h1>
  </body>
</html>

3) Add styles for the h1

No matter how good our animated GIF looks, if we rely on the default styling then it鈥檒l probably still look bad.

Let鈥檚 add a few basic styles to get the text similar to that of L贸vi.

<html>
  <head>
    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      h1 {
        font-family: Inter;
        font-size: 24px;
        font-weight: 400;
        letter-spacing: -0.3px;
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <h1>Made in the desert in Morocco</h1>
  </body>
</html>

4) Find a GIF

Time to find a suitable GIF for the background. Now, seeing as we鈥檙e going for the desert theme, I鈥檝e gone for something that evokes the 鈥渉eat鈥 of the desert.

Feel free to find something that fits whatever theme it is that you鈥檙e going for.

The GIF I selected to be used for this tutorial. Original source: https://media1.tenor.com/m/liJ84fQBFgsAAAAC/shane-ford.gif

The GIF I selected to be used for this tutorial.

I used Tenor鈥檚 GIF search tool but please do note that other GIF searching tools are available.

<html>
  <head>
    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      h1 {
        font-family: Inter;
        font-size: 24px;
        font-weight: 400;
        letter-spacing: -0.3px;
        margin: 0px;
        padding: 0px;
        background-image: url(https://media1.tenor.com/m/liJ84fQBFgsAAAAC/shane-ford.gif);
      }
    </style>
  </head>
  <body>
    <h1>Made in the desert in Morocco</h1>
  </body>
</html>

5) Finishing touches

Now although at this point we have our GIF in place, we still need to clip it to the text to create that nice animated text effect that we鈥檙e going for.

You鈥檒l probably have to play around with the background size and/or position before you get it right.

<html>
  <head>
    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      h1 {
        font-family: Inter;
        font-size: 24px;
        font-weight: 400;
        letter-spacing: -0.3px;
        margin: 0px;
        padding: 0px;
        background-image: url(https://media1.tenor.com/m/liJ84fQBFgsAAAAC/shane-ford.gif);
        background-size: 500%;
        background-repeat: no-repeat;
        background-position: 50% 40%;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    </style>
  </head>
  <body>
    <h1>Made in the desert in Morocco</h1>
  </body>
</html>

End result

And voila鈥攜our animated text is complete!

If you do put this tutorial to use and want to put anything out there into the world, then hit me up on X at @butler952.

Text animation tutorial end results

Questions? Reach out!

I'll try to get back to you as soon as I can

Message Aaron

2024. Made in London.