Automate/trigger single SVG-element animations

Animation
, , , ,
1

Hey everybody,

right now i'm working on a template for online-banners.

A really nice effects i would like to implement is this 'typewriter'-one.
I already found a lot of thoughts and scripts you guys offered for working solutions working around real text and textfields.

So my approach is based around SVGs.

My aim is to generate a workflow similar to this:

  • save an svg with a group of vector based letters out of adobe Illustrator
  • open into an online-tool like https://svgartista.net/ to get the svg perfectly seperated into X single elements
  • paste SVG Code into a rectangle inside of Hype and set ID e.g. "text01"
  • run a Script e.g. "animateText01" at a certain point in timeline to animate the SVG
  • the scripts animates every single element the same with an adjustable delay
  • repeat for more text

So the SVG-Code i get output from SVG Artista looks like this:

<!--?xml version="1.0" encoding="UTF-8"?-->
<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 595.28 841.89" width="595.280029296875" height="841.8900146484375">
  <defs>
    <style>
      .cls-1 {
        fill: #1d1d1b;
      }
    </style>
  </defs>
  <path class="cls-1 svg-elem-1" d="m47.73,402.57h46.32v-12.8h-31.44v-10.88h28v-11.52h-28v-10h30.64v-11.92h-45.52v57.12Z"></path>
  <path class="cls-1 svg-elem-2" d="m116.05,345.44h-13.6v10.4h13.6v-10.4Zm-13.6,57.12h13.6v-41.52h-13.6v41.52Z"></path>
  <path class="cls-1 svg-elem-3" d="m125.65,402.57h13.6v-22.64c0-4.48,2.24-8.88,7.36-8.88,5.44,0,6.8,3.28,6.8,7.28v24.24h13.6v-26.64c0-6-1.12-16.08-14.96-16.08-4.96,0-10.48,2.64-13.04,6.88h-.16v-5.68h-13.2v41.52Z"></path>
  <path class="cls-1 svg-elem-4" d="m179.01,402.57h13.6v-32.72h8.16v-8.8h-8.16v-1.84c0-3.76,1.92-4.16,5.04-4.16,1.2,0,2.4.08,3.68.24v-9.6c-2.16-.08-4.4-.24-6.56-.24-11.6,0-15.76,3.68-15.76,15.6h-6.56v8.8h6.56v32.72Z"></path>
  <path class="cls-1 svg-elem-5" d="m217.81,373.85c.64-3.44,2.88-5.2,6.8-5.2,2.8,0,6.56,1.2,6.56,4.32,0,2.56-1.28,3.28-3.6,3.84-9.44,1.92-24.16.96-24.16,14.4,0,8.56,6.16,12.56,14.16,12.56,5.04,0,10.16-1.36,13.68-5.12.24,1.36.24,2.64.8,3.92h13.68c-1.6-3.28-1.6-7.12-1.6-10.64v-18.16c0-11.76-9.52-13.92-19.36-13.92-4.8,0-9.44.72-13.2,2.88-3.76,2.16-6.24,5.68-6.48,11.12h12.72Zm-.8,16.8c0-3.28,2.48-4.56,5.6-5.28,2.96-.88,6.48-1.04,8.4-2.24.32,8.64-1.84,12.24-8.32,12.24-3.12,0-5.68-1.28-5.68-4.72Z"></path>
  <path class="cls-1 svg-elem-6" d="m293.33,376.25c-1.04-10.88-10.08-16.4-20.48-16.4-13.36,0-21.76,9.44-21.76,22.64s9.28,21.28,21.76,21.28c11.12,0,19.6-6.32,20.88-17.52h-13.2c-.64,4.48-2.96,7.12-7.76,7.12-5.76,0-8.08-5.52-8.08-10.88,0-5.76,1.2-12.24,8.8-12.24,3.44,0,6.64,2.48,6.64,6h13.2Z"></path>
  <path class="cls-1 svg-elem-7" d="m300.53,402.57h13.6v-22.64c0-4.48,2.24-8.88,7.36-8.88,5.44,0,6.8,3.28,6.8,7.28v24.24h13.6v-26.64c0-6-1.12-16.08-14.96-16.08-4.96,0-10.48,2.64-12.64,6.88h-.16v-21.28h-13.6v57.12Z"></path>
  <path class="cls-1 svg-elem-8" d="m393.01,385.13c.64-14.08-6.8-25.28-21.68-25.28-12.24,0-22.4,9.12-22.4,21.84,0,13.92,9.2,22.08,22.72,22.08,9.28,0,18.08-4.16,20.64-13.76h-12.72c-1.28,3.12-4.48,4.56-7.76,4.56-5.76,0-9.04-3.68-9.28-9.44h30.48Zm-30.48-7.6c.88-5.12,4-8.48,8.8-8.48s7.84,3.76,8.08,8.48h-16.88Z"></path>
  <path class="cls-1 svg-elem-9" d="m95.33,425.44h-15.52l-11.2,42.48h-.16l-11.2-42.48h-15.52l18,57.12h17.12l18.48-57.12Z"></path>
  <path class="cls-1 svg-elem-10" d="m136.69,465.13c.64-14.08-6.8-25.28-21.68-25.28-12.24,0-22.4,9.12-22.4,21.84,0,13.92,9.2,22.08,22.72,22.08,9.28,0,18.08-4.16,20.64-13.76h-12.72c-1.28,3.12-4.48,4.56-7.76,4.56-5.76,0-9.04-3.68-9.28-9.44h30.48Zm-30.48-7.6c.88-5.12,4-8.48,8.8-8.48s7.84,3.76,8.08,8.48h-16.88Z"></path>
  <path class="cls-1 svg-elem-11" d="m143.97,482.57h13.6v-20.56c0-5.2,3.52-9.84,10.24-9.84,1.84,0,3.36.24,5.2.8v-12.4c-1.04-.24-2.16-.32-3.2-.32-5.84,0-10.48,2.72-12.48,8.08h-.16v-7.28h-13.2v41.52Z"></path>
  <path class="cls-1 svg-elem-12" d="m189.73,453.85c.64-3.44,2.88-5.2,6.8-5.2,2.8,0,6.56,1.2,6.56,4.32,0,2.56-1.28,3.28-3.6,3.84-9.44,1.92-24.16.96-24.16,14.4,0,8.56,6.16,12.56,14.16,12.56,5.04,0,10.16-1.36,13.68-5.12.24,1.36.24,2.64.8,3.92h13.68c-1.6-3.28-1.6-7.12-1.6-10.64v-18.16c0-11.76-9.52-13.92-19.36-13.92-4.8,0-9.44.72-13.2,2.88-3.76,2.16-6.24,5.68-6.48,11.12h12.72Zm-.8,16.8c0-3.28,2.48-4.56,5.6-5.28,2.96-.88,6.48-1.04,8.4-2.24.32,8.64-1.84,12.24-8.32,12.24-3.12,0-5.68-1.28-5.68-4.72Z"></path>
  <path class="cls-1 svg-elem-13" d="m225.49,482.57h13.6v-20.56c0-5.2,3.52-9.84,10.24-9.84,1.84,0,3.36.24,5.2.8v-12.4c-1.04-.24-2.16-.32-3.2-.32-5.84,0-10.48,2.72-12.48,8.08h-.16v-7.28h-13.2v41.52Z"></path>
  <path class="cls-1 svg-elem-14" d="m280.53,450.25c6.08,0,8.08,5.84,8.08,11.12,0,5.68-2.16,12-8.16,12s-8.24-4.72-8.24-12c0-8.64,4.72-11.12,8.32-11.12Zm-21.44,32.32h12.96v-4.8h.16c2.72,4,6.56,6,11.44,6,13.04,0,18.56-11.12,18.56-22.88,0-10.8-5.76-21.04-17.52-21.04-5.12,0-9.04,1.92-11.84,5.76h-.16v-20.16h-13.6v57.12Z"></path>
  <path class="cls-1 svg-elem-15" d="m351.57,465.13c.64-14.08-6.8-25.28-21.68-25.28-12.24,0-22.4,9.12-22.4,21.84,0,13.92,9.2,22.08,22.72,22.08,9.28,0,18.08-4.16,20.64-13.76h-12.72c-1.28,3.12-4.48,4.56-7.76,4.56-5.76,0-9.04-3.68-9.28-9.44h30.48Zm-30.48-7.6c.88-5.12,4-8.48,8.8-8.48s7.84,3.76,8.08,8.48h-16.88Z"></path>
  <path class="cls-1 svg-elem-16" d="m372.45,425.44h-13.6v10.4h13.6v-10.4Zm-13.6,57.12h13.6v-41.52h-13.6v41.52Z"></path>
  <path class="cls-1 svg-elem-17" d="m407.09,441.05h-8.4v-12.56h-13.6v12.56h-6.88v8.8h6.88v18.48c0,11.2,2.96,14.64,14.56,14.64,2.48,0,4.96-.32,7.44-.4v-10c-1.2,0-2.32.16-3.52.16-2.96,0-4.88-.72-4.88-4v-18.88h8.4v-8.8Z"></path>
  <path class="cls-1 svg-elem-18" d="m454.45,441.05h-13.6v22.24c0,7.36-4.56,9.28-7.44,9.28-4.4,0-6.72-1.92-6.72-7.44v-24.08h-13.6v24.96c0,10.88,3.44,17.76,15.36,17.76,4.8,0,10.08-2.64,12.64-6.88h.16v5.68h13.2v-41.52Z"></path>
  <path class="cls-1 svg-elem-19" d="m463.57,482.57h13.6v-22.64c0-4.48,2.24-8.88,7.36-8.88,5.44,0,6.8,3.28,6.8,7.28v24.24h13.6v-26.64c0-6-1.12-16.08-14.96-16.08-4.96,0-10.48,2.64-13.04,6.88h-.16v-5.68h-13.2v41.52Z"></path>
  <path class="cls-1 svg-elem-20" d="m554.13,441.05h-13.04v5.2h-.16c-2.4-4.24-6.08-6.4-11.12-6.4-11.76,0-18.24,9.28-18.24,20.32,0,11.68,5.68,20.64,18.24,20.64,4.48,0,8.56-2.24,11.04-6.08h.16v3.92c0,5.12-.64,9.68-7.12,9.68-2.16,0-3.84-.32-4.96-.88-1.2-.64-2-1.84-2.32-3.6h-13.6c1.52,11.12,10.8,13.28,20.4,13.28,19.44,0,20.72-12.88,20.72-19.6v-36.48Zm-12.88,19.68c0,5.12-2.48,9.68-8.24,9.68s-7.84-4.88-7.84-9.76c0-5.12,1.92-10.4,7.92-10.4s8.16,5.12,8.16,10.48Z"></path>
</svg>

The wanted animation is simple and looks like this:

/***************************************************
 * Generated by SVG Artista on 9/11/2023, 2:17:54 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

@-webkit-keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-fill-1 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s both;
          animation: animate-svg-fill-1 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s both;
}

@-webkit-keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

.svg-elem-2 {
  -webkit-animation: animate-svg-fill-2 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.03s both;
          animation: animate-svg-fill-2 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.03s both;
}

@-webkit-keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

@keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

.svg-elem-3 {
  -webkit-animation: animate-svg-fill-3 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.06s both;
          animation: animate-svg-fill-3 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.06s both;
}

@-webkit-keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

@keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

.svg-elem-4 {
  -webkit-animation: animate-svg-fill-4 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.09s both;
          animation: animate-svg-fill-4 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.09s both;
}

@-webkit-keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

@keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

.svg-elem-5 {
  -webkit-animation: animate-svg-fill-5 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.12s both;
          animation: animate-svg-fill-5 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.12s both;
}

@-webkit-keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

@keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

.svg-elem-6 {
  -webkit-animation: animate-svg-fill-6 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.15s both;
          animation: animate-svg-fill-6 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.15s both;
}

@-webkit-keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

@keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

.svg-elem-7 {
  -webkit-animation: animate-svg-fill-7 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.18s both;
          animation: animate-svg-fill-7 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.18s both;
}

@-webkit-keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

@keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

.svg-elem-8 {
  -webkit-animation: animate-svg-fill-8 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.21s both;
          animation: animate-svg-fill-8 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.21s both;
}

@-webkit-keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

@keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

.svg-elem-9 {
  -webkit-animation: animate-svg-fill-9 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.24s both;
          animation: animate-svg-fill-9 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.24s both;
}

@-webkit-keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

@keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

.svg-elem-10 {
  -webkit-animation: animate-svg-fill-10 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.27s both;
          animation: animate-svg-fill-10 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.27s both;
}

@-webkit-keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

@keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

.svg-elem-11 {
  -webkit-animation: animate-svg-fill-11 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.3s both;
          animation: animate-svg-fill-11 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.3s both;
}

@-webkit-keyframes animate-svg-fill-12 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

@keyframes animate-svg-fill-12 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

.svg-elem-12 {
  -webkit-animation: animate-svg-fill-12 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.32999999999999996s both;
          animation: animate-svg-fill-12 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.32999999999999996s both;
}

@-webkit-keyframes animate-svg-fill-13 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

@keyframes animate-svg-fill-13 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

.svg-elem-13 {
  -webkit-animation: animate-svg-fill-13 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.36s both;
          animation: animate-svg-fill-13 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.36s both;
}

@-webkit-keyframes animate-svg-fill-14 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

@keyframes animate-svg-fill-14 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

.svg-elem-14 {
  -webkit-animation: animate-svg-fill-14 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.39s both;
          animation: animate-svg-fill-14 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.39s both;
}

@-webkit-keyframes animate-svg-fill-15 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

@keyframes animate-svg-fill-15 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

.svg-elem-15 {
  -webkit-animation: animate-svg-fill-15 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.42s both;
          animation: animate-svg-fill-15 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.42s both;
}

@-webkit-keyframes animate-svg-fill-16 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

@keyframes animate-svg-fill-16 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

.svg-elem-16 {
  -webkit-animation: animate-svg-fill-16 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.44999999999999996s both;
          animation: animate-svg-fill-16 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.44999999999999996s both;
}

@-webkit-keyframes animate-svg-fill-17 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

@keyframes animate-svg-fill-17 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

.svg-elem-17 {
  -webkit-animation: animate-svg-fill-17 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.48s both;
          animation: animate-svg-fill-17 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.48s both;
}

@-webkit-keyframes animate-svg-fill-18 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

@keyframes animate-svg-fill-18 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

.svg-elem-18 {
  -webkit-animation: animate-svg-fill-18 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.51s both;
          animation: animate-svg-fill-18 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.51s both;
}

@-webkit-keyframes animate-svg-fill-19 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

@keyframes animate-svg-fill-19 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

.svg-elem-19 {
  -webkit-animation: animate-svg-fill-19 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.54s both;
          animation: animate-svg-fill-19 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.54s both;
}

@-webkit-keyframes animate-svg-fill-20 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

@keyframes animate-svg-fill-20 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

.svg-elem-20 {
  -webkit-animation: animate-svg-fill-20 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.57s both;
          animation: animate-svg-fill-20 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.57s both;
}

So, i am a copy/paster and cant code a single line. I can understand most things and adjust to get stuff running (sometimes) but otherwise absolutely helpless :confused:

The dream is to have a setup with a single animation and a delay (right now every element has got its own animation) with animation duration, type of easing, delay to next element-animation.

Thanks you guys already so much for helping !!!

2

First note that while you can add .svg files to Hype as image elements (source URL), you'll probably instead want to make sure that the SVG file is part of the HTML itself. This can be done via:

  • Create a rectangle element
  • Remove all styling
  • Choose the Edit > Edit Element's Inner HTML menu item
  • Paste in the SVG code

There's probably a couple approaches you could take. The most Hype-centric way would be to bring in each letter to a separate element, and just animate these on the timeline (eschewing the animation CSS code above). But if you'd like to more work with the existing SVG that has all the letters, and still use the basic idea of the animation, I'd probably do this flow:

  1. Paste the SVG into a Rectangle element (as shown above)

  2. Make a style tag in the head HTML that has a keyframes entry (though we only need one, so I'm omitting the "-1" numbering)

<style>
	
@keyframes animate-svg-fill {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 29, 27);
  }
}

</style>
  1. Add a Timeline Action in Hype that when triggered will add animation code to kick off the animation for the lettering in a staggered fashion
	var totalDuration = 1.0;
	var letterDuration = 0.1;
	
	var sceneElement = hypeDocument.getElementById(hypeDocument.currentSceneId());
	var svgElements = Array.from(sceneElement.querySelectorAll("[class*=svg-elem]"));
	
	var startTime = 0;
	var separation = (totalDuration - letterDuration) / svgElements.length;
	for(var svgElement of svgElements) {
		svgElement.style["animation"] = "animate-svg-fill " + letterDuration + "s cubic-bezier(0.55, 0.085, 0.68, 0.53) " + startTime + "s both";
		startTime += separation;
	}

note that you can change the timing by changing the values at the top of the function, but this is all started based on where you put the action on the timeline

  1. (optional-ish) Since the animation wouldn't happen immediately, there's the small problem that your SVG doesn't start off with transparent letters. You could either export a new one where the fill is all transparent or just add a On Prepare For Display handler in the scene inspector that sets all the letters' fills to transparent.
	var sceneElement = hypeDocument.getElementById(hypeDocument.currentSceneId());
	var svgElements = Array.from(sceneElement.querySelectorAll("[class*=svg-elem]"));
	for(var svgElement of svgElements) {
		svgElement.style["fill"] = "transparent";
	}

Here's the test document I made:

SVGAnimation.hype.zip (41.4 KB)

But, like I said there's many ways to do this. The ultimate techniques may depend on what kind of flexibility you want and how you have the elements in the scene.

2 Likes
3

@jonathan
Brilliant! Thank your for your lightning fast answer and solution!

The reason for why i'm using this way of animation is based on a workflow including Adobe Illustrator.
I'm creating a lot of online advertisements for the same advertiser and so i have a lot of text to display in a corporate similar way.

Sure, animating this directly, letter by letter inside of hype would be possible too.
But i can't quiet imagine a faster way then just copy-pasting the SVG into a rectangle and have a setup like the one you delivered!

So for me i'm super happy now - there is just one more thing.
Everything is working fine for my one single SVG.

I'm wondering, what would be possible the easiest way to handle amount X of individual SVGs in a brilliant setup like the one you build including the possibility to loop the whole animation.

what i am aiming for:
maybe easy control via classnames svg1, svg2 ... and identical smart counting timeline-action
Reset at the end of loop ..

This is how far i got:
AnimateMultipleSVGsWithLoop.hype.zip (18,2 KB)

I was able to start the second svg, but only by manually editing the svg-tags.

Thank you very much in advance!

4

You don't really need to do all the SVG workarounds to do a quick splitting:
TextSplittingWithCSSAnimation.hype.zip (47,1 KB)

Maybe this helps. Regards.

REDOWNLOAD UPDATED TO VERSION WITH DYNAMIC DELAY.

2 Likes
5

@MaxZieb
Awesome! Looks pretty simple and easy to use.
I definitely will use this way on my next fitting project.

So in my actual online-ad-project i unfortunately don't have access to fonts.
Thus i try to figure out a workflow centred around SVGs.

And as described above, the solution from jonathan work decent! Just the usage and control of more SVGs on loop is a thing. tbh.

Thank you a lot! I really appreciate your work and your very inspiring thinking and initiative way of solving problems.

6

At least now i managed to "undo" the animation. I just copy-pasted the animation-keyframs in reverse and called it right before loop.

AnimateMultipleSVGsWithLoop 2.hype.zip (18,7 KB)

Is there any way you guys could help me automate this?

7

While there are probably some crazy techniques for automating this, the easiest and most flexible is to keep code around that lets you at least specify the svg element class names you want to control. So I made an update from your example that puts the animation/reset code into functions in the head html and this significantly reduces the amount of complexity you need in the action handler javascript. Now it just looks like:

	resetAnimation(hypeDocument, "svg-elem");
	resetAnimation(hypeDocument, "svg2-elem");

and

	startAnimation(hypeDocument, "svg-elem");

	startAnimation(hypeDocument, "svg2-elem");

I wasn't quite sure on your purpose for the undoing of the animation in the example you sent though? It seems like you do an animated position so it is off screen before running this. The resetAnimation() seems functionally equivalent in this case since the animation isn't shown?

Here's the example doc:

AnimateMultipleSVGsWithLoop 3.hype.zip (50.4 KB)

1 Like