2

Moving Letters | Text animated with JavaScript & anime.js

 1 year ago
source link: https://tobiasahlin.com/moving-letters/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
source.svg Source
<h1 class="ml1">
  <span class="text-wrapper">
    <span class="line line1"></span>
    <span class="letters">THURSDAY</span>
    <span class="line line2"></span>
  </span>
</h1>

THURSDAY

source.svg Source
<h1 class="ml2">Sunny mornings</h1>

Sunny mornings

source.svg Source
<h1 class="ml3">Great Thinkers</h1>

Great Thinkers

source.svg Source
<h1 class="ml4">
  <span class="letters letters-1">Ready</span>
  <span class="letters letters-2">Set</span>
  <span class="letters letters-3">Go!</span>
</h1>

Ready Set Go!

source.svg Source
<h1 class="ml5">
  <span class="text-wrapper">
    <span class="line line1"></span>
    <span class="letters letters-left">Signal</span>
    <span class="letters ampersand">&</span>
    <span class="letters letters-right">Noise</span>
    <span class="line line2"></span>
  </span>
</h1>

Signal & Noise

source.svg Source
<h1 class="ml6">
  <span class="text-wrapper">
    <span class="letters">Beautiful Questions</span>
  </span>
</h1>

Beautiful Questions

source.svg Source
<h1 class="ml7">
  <span class="text-wrapper">
    <span class="letters">Reality is broken</span>
  </span>
</h1>

Reality is broken

source.svg Source
<h1 class="ml8">
  <span class="letters-container">
    <span class="letters letters-left">Hi</span>
    <span class="letters bang">!</span>
  </span>
  <span class="circle circle-white"></span>
  <span class="circle circle-dark"></span>
  <span class="circle circle-container"><span class="circle circle-dark-dashed"></span></span>
</h1>

source.svg Source
<h1 class="ml9">
  <span class="text-wrapper">
    <span class="letters">Coffee mornings</span>
  </span>
</h1>

Coffee mornings

source.svg Source
<h1 class="ml10">
  <span class="text-wrapper">
    <span class="letters">Domino Dreams</span>
  </span>
</h1>

Domino Dreams

source.svg Source
<h1 class="ml11">
  <span class="text-wrapper">
    <span class="line line1"></span>
    <span class="letters">Hello Goodbye</span>
  </span>
</h1>

Hello Goodbye

source.svg Source
<h1 class="ml12">A new production</h1>

A new production

source.svg Source
<h1 class="ml13">Rising Strong</h1>

Rising Strong

source.svg Source
<h1 class="ml14">
  <span class="text-wrapper">
    <span class="letters">Find Your Element</span>
    <span class="line"></span>
  </span>
</h1>

Find Your Element

source.svg Source
<h1 class="ml15">
  <span class="word">Out</span>
  <span class="word">now</span>
</h1>

Out now

source.svg Source
<h1 class="ml16">Made with love</h1>

Made with love


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK