The last article talked about a wave animation effect, this article will talk about the effect in the text application, the effect is as follows:

Of course, this effect can also be implemented using SVG in CSS, but using a combination of MASK and pattern elements in SVG. Let’s do this step by step.

SVG shape preparation

To get started, do a little prep work, which is to prepare a wave shape, as described in the previous article.

Many graphic design software support vector shape design and export to SVG format, such as AI. Effects like this article require the preparation of vector shapes as shown below.

Once the shape is designed, repeat and tile the shape to form a long wave.

Then move its position on the X axis to create an animation effect of a wave rolling.

The shape is ready and ready to go. Of course, CSS could be used here, but browsers don’t support some of the latest properties. Here we use SVG, which is simple and efficient, with good browser support.

SVG implementation

Before you start, I recommend reading Sara’s article on CSS and SVG.

The main thing here is to use a mask in SVG for this animation.

<defs>
  <text id="text" font-size="100">YOUR TEXT HERE</text>

  <mask id="text-mask">
    <use x="0" y="0" xlink:href="#text" fill="#ffffff"/>
  </mask>
</defs>
Copy the code

The text element and mask are defined in the DEFS element for later reuse. You only need to write it once, and use the xlink:href attribute in the use element to refer to it where necessary.

Note here that white is used to fill the text in the mask. This is because in a mask in SVG, the content area in white is visible, while the content in the black area is not.

As for the ripple, it is defined in the Pattern element so that it can be directly tiled when filling elements.

<defs> ... <pattern id="water" width=".25" height="1.1" patternContentUnits="objectBoundingBox"> <path fill="# FFF "d="... /> </pattern> </defs> <rect class="water-fill" fill="url(#water)" mask="url(#text-mask)" x="0" y="0" width="1600" height="120"/>Copy the code

Since the wave shape made is too short to fill the whole figure, I use pattern in SVG. In the rectangle element, the defined pattern is used to fill the whole rectangle, and the mask is used to render the wave shape, demo link

animation

There are two main ways to realize animation, CSS and JS. But there are always some strange issues with current browsers; Some attributes in SVG, such as X and y, are not supported in some browsers. Transform: Translate (x, Y) is supported by most browsers, but is not applicable in this article because moving the element and mask at the same time can be solved by using some third-party wrapped JS library.

Here to skip the CSS scheme, the direct use of JS methods to achieve, CSS scheme link.

There are many JS libraries to choose from, such as velocity.js and Transit. Here we use GSAP/TweenMax.

GreenSock writes the animation

If you are not familiar with GreenSock, check out a brief tutorial on GreenSock.

Simply put, GreenSock is used to animate the relevant transform, and it also does some browser compatibility work for us.

The code is as follows:

Var fill=document.querySelector(".water-fill"); // Wave animation effect, FromTo (fill,0.8,{// Set the "from" position attr:{x:-400}}, { // Set the "to" position attr:{ x:0, }, // Repeat infinitely repeat:-1, // Linear easing ease:Linear.easeNone }); FromTo (fill,10,{// From attr:{y:120, height:0},},{// To attr:{y:-20, height:140}, repeat:-1, // Reverse animation on loop yoyo:true, ease:Linear.easeNone });Copy the code

To make the experience a little better, use one more text layer and fill it with a slightly darker color so that the text is readable before the animation starts.

<use x="0" y="0" xlink:href="#text" fill="#222"/>
Copy the code

A text wave animation effect is complete, very simple.

The demo link

This paper is mainly excerpted from the article Create Text Filling with Water Effect. Please kindly comment on any omissions or inadequacies.