Animated writing- CSS animation examples

The Garden Eight web site uses a standard animation technique whereby text seems to be written out. to realize the result, we have a tendency to communicate SVG. to start with, we’ll produce the SVG. There are 2 approaches here: convert the text to methods so as to animate them or use SVG text. each approach has their execs and cons.

Start by making our keyframe animation. the sole perform we want it to perform is to alter the stroke-dash offset. currently, we’ve created our animation, we want to use the values we wish to animate from. we have a tendency to set the stroke-dash array, which can produce gaps within the stroke. we wish to line our stroke to be an oversized enough worth to hide the whole part, finally compensatory the dash by the length of the stroke.

The magic happens after we apply our animation. By invigorating the offset, we’re transferral the stroke into reading – making a drawing result. we wish the weather to draw one at a time, with some overlap between the top of drawing one part and getting down to draw following. to realize this we have a tendency to communicate Sass/SCSS and nth-of-type to delay every letter by [*fr1] the length of the animation, increased by the position of that specific letter.

HTML Code:

<div class="container">

  <svg viewBox="0 0 1418 116" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>@WebDesignerMag</title>
    <g stroke="none" fill="none" fill-rule="evenodd" fill-opacity="0">
      <text id="@WebDesignerMag" stroke="#fff" fill="#645F5A" font-weight="normal" font-family="PermanentMarker-Regular, Permanent Marker" font-size="144">
        <tspan x="3" y="109"><!--
          --><tspan>@</tspan><!--
          --><tspan>W</tspan><!--
          --><tspan>e</tspan><!--
          --><tspan>b</tspan><!--
          --><tspan>D</tspan><!--
          --><tspan>e</tspan><!--
          --><tspan>s</tspan><!--
          --><tspan>i</tspan><!--
          --><tspan>g</tspan><!--
          --><tspan>n</tspan><!--
          --><tspan>e</tspan><!--
          --><tspan>r</tspan><!--
          --><tspan>M</tspan><!--
          --><tspan>a</tspan><!--
          --><tspan>g</tspan><!--
        --></tspan>
      </text>
    </g>
  </svg>

</div>

CSS Code:

@import url("https://fonts.googleapis.com/css?family=Permanent+Marker");
.container {
  background-color: #232323;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 100vh;
}
.container svg {
  max-width: 45rem;
  width: 100%;
  height: auto;
  fill: none;
  stroke: white;
  stroke-width: 4;
}
.container svg tspan > tspan {
  stroke-dasharray: 1500;
  stroke-dashoffset: -1500;
}
.container svg tspan > tspan:nth-of-type(1) {
  -webkit-animation: draw 300ms 150ms forwards;
          animation: draw 300ms 150ms forwards;
}
.container svg tspan > tspan:nth-of-type(2) {
  -webkit-animation: draw 300ms 300ms forwards;
          animation: draw 300ms 300ms forwards;
}
.container svg tspan > tspan:nth-of-type(3) {
  -webkit-animation: draw 300ms 450ms forwards;
          animation: draw 300ms 450ms forwards;
}
.container svg tspan > tspan:nth-of-type(4) {
  -webkit-animation: draw 300ms 600ms forwards;
          animation: draw 300ms 600ms forwards;
}
.container svg tspan > tspan:nth-of-type(5) {
  -webkit-animation: draw 300ms 750ms forwards;
          animation: draw 300ms 750ms forwards;
}
.container svg tspan > tspan:nth-of-type(6) {
  -webkit-animation: draw 300ms 900ms forwards;
          animation: draw 300ms 900ms forwards;
}
.container svg tspan > tspan:nth-of-type(7) {
  -webkit-animation: draw 300ms 1050ms forwards;
          animation: draw 300ms 1050ms forwards;
}
.container svg tspan > tspan:nth-of-type(8) {
  -webkit-animation: draw 300ms 1200ms forwards;
          animation: draw 300ms 1200ms forwards;
}
.container svg tspan > tspan:nth-of-type(9) {
  -webkit-animation: draw 300ms 1350ms forwards;
          animation: draw 300ms 1350ms forwards;
}
.container svg tspan > tspan:nth-of-type(10) {
  -webkit-animation: draw 300ms 1500ms forwards;
          animation: draw 300ms 1500ms forwards;
}
.container svg tspan > tspan:nth-of-type(11) {
  -webkit-animation: draw 300ms 1650ms forwards;
          animation: draw 300ms 1650ms forwards;
}
.container svg tspan > tspan:nth-of-type(12) {
  -webkit-animation: draw 300ms 1800ms forwards;
          animation: draw 300ms 1800ms forwards;
}
.container svg tspan > tspan:nth-of-type(13) {
  -webkit-animation: draw 300ms 1950ms forwards;
          animation: draw 300ms 1950ms forwards;
}
.container svg tspan > tspan:nth-of-type(14) {
  -webkit-animation: draw 300ms 2100ms forwards;
          animation: draw 300ms 2100ms forwards;
}
.container svg tspan > tspan:nth-of-type(15) {
  -webkit-animation: draw 300ms 2250ms forwards;
          animation: draw 300ms 2250ms forwards;
}

@-webkit-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}

Demo | Download

Leave a Reply