Cool HTML5 SVG text deformation animation effects

Brief Tutorial

This is a very cool HTML5 SVG text deformation animation effect. This special effect uses SVG and anime.js to complete various beautiful letter animation special effects through SVG stroke animation.

How to use

HTML structure

The HTML structure of the first DEMO is as follows:

<svg width="100%" height="100%" viewBox="0 0 320 180" class="letters letters--effect-1">
  <!--W-->
  <g class="letter letter--1">
    <g class="letter__part">
      <path class="letter__layer color-6" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
      <path class="letter__layer color-1" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
      <path class="letter__layer color-2" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
    </g>
  </g>
  <!--I-->
  <g class="letter letter--2">
    <g class="letter__part">
      <path class="letter__layer color-6" d="M100,20.3l8.4,58.4" />
      <path class="letter__layer color-2" d="M100,20.3l8.4,58.4" />
      <path class="letter__layer color-3" d="M100,20.3l8.4,58.4" />
    </g>
  </g>
  <!--L-->
  <g class="letter letter--3">
    <g class="letter__part">
      <path class="letter__layer color-6" d="M126.4,70.8l27.6,0.5" />
      <path class="letter__layer color-3" d="M126.4,70.8l27.6,0.5" />
      <path class="letter__layer color-4" d="M126.4,70.8l27.6,0.5" />
    </g>
    <g class="letter__part">
      <path class="letter__layer color-6" d="M128.9,15.6l-2.3,60.2" />
      <path class="letter__layer color-3" d="M128.9,15.6l-2.3,60.2" />
      <path class="letter__layer color-4" d="M128.9,15.6l-2.3,60.2" />
    </g>
  </g>
  <!-- ...and so on -->
</svg>

CSS style

Add some styles to SVG text:

/* Main SVG */
 
.letters {
  position: relative;
  display: block;
  min-height: 400px;
  max-height: 70vh;
  margin: 0 auto;
}
 
 
/* Letter path */
 
.letter__layer {
  fill: none;
  stroke-miterlimit: 3;
  stroke-linecap: butt;
  stroke-linejoin: bevel;
}
 
/* Styles for effect 1 */
 
.letters--effect-1 .letter__layer:first-child {
  stroke-width: 9px;
}
 
.letters--effect-1 .letter__layer:nth-child(2) {
  stroke-width: 9.5px;
}
 
.letters--effect-1 .letter__layer:nth-child(3) {
  stroke-width: 10px;
}
 
 
/* Effect 1 colors */
 
.color-1 { stroke: #dea521; }
.color-2 { stroke: #f84242; }
.color-3 { stroke: #3758a7; }
.color-4 { stroke: #f79c8c; }
.color-5 { stroke: #84b5bd; }
.color-6 { stroke: #feefde; }

JavaScript

The animation of SVG text is driven by anime.js. The anime.js animation library plugin allows us to set different properties of animations, as well as handle different types of animations. This special effect mainly has two types of animation: the first is the movement of each letter, and the second is the stroke animation. Stroke animation is accomplished using stroke-dasharray and stroke-dashoffset.

Phrase.prototype.options = {
  outAnimation: {
    translateY: [0, 15],
    opacity: [1, 0],
    duration: 250,
    easing: 'easeInOutQuad'
  },
  // The animation settings for the ´in´ animation (when the letters appear again).
  inAnimation: {
    properties: {
      translateY: {
        value: [-30, 0],
        duration: 900,
        elasticity: 600,
        easing: 'easeOutElastic'
      },
      opacity: {
        value: [0, 1],
        duration: 500,
        easing: 'linear'
      },
    },
    delay: 40 // delay increment per letter.
  },
  // Stroke animation settings
  pathAnimation: {
    duration: 800,
    easing: 'easeOutQuint',
    delay: 200 // delay increment per path.
  }
};

The above is the content of the cool HTML5 SVG text deformation animation special effects. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!