GIF Animated Text

---

Look Demo

Fill in any header text with an animated GIF instead of solid color. This plugin uses css editor and works with all template families.

---

How To Install

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// GIF Text //

h1 {
  background: url(GIF-URL-HERE.gif) !important;
  background-size: cover !important;
  background-position: center !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  }

---

Customize

Change the h1 text property to the one you’d like to target. This can be either h1, h2, or h3.

Add in your animated GIF by replacing GIF-URL-HERE.gif with your own link. We recommend hosting the GIF file within your Squarespace website via CSS > Manage Files.

Font family and font styles can all be adjusted in the Site Styles settings like normal.

---