Anime.js V3 Logo Animation using HTML CSS and JS (Anime.js)

Welcome to the Anime.js V3 Logo Animation tutorial, where we’re about to embark on an exciting journey into the realm of dynamic web design! In this guide, we’ll harness the full potential of HTML, CSS, and Anime.js to create a stunning logo animation that showcases the power of version 3. Get ready to infuse your brand with energy and style as we dive deep into code, transforming static logos into dynamic masterpieces. Let’s bring your brand to life with Anime.js V3!

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

Demo

See the Pen anime.js V3 logo animation by Julian Garnier (@juliangarnier) on CodePen.

HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Anime.js V3 Logo Animation using HTML CSS and JS (Anime.js) - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->

    <script src="script.js"></script>
</body>

</html>

Paste the below code in your `<body>` tag.

<div class="main-logo">
  <div class="logo-animation-wrapper">
    <div class="logo-animation">
      <div class="anime-logo">
        <div class="anime-logo-signs">
          <div class="logo-letter letter-a">
            <svg class="bounced" viewBox="0 0 200 240" width="200" height="240">
              <path class="line" d="M30 20h130c9.996 0 10 40 10 60v140H41c-11.004 0-11-40-11-60s-.004-60 10-60h110"/>
            </svg>
          </div>
          <div class="logo-letter letter-n">
            <svg class="bounced" viewBox="0 0 200 240" width="200" height="240">
              <path class="line" d="M170 220V60c0-31.046-8.656-40-19.333-40H49.333C38.656 20 30 28.954 30 60v160"/>
            </svg>
          </div>
          <div class="logo-letter letter-i">
            <svg class="bounced" viewBox="0 0 60 240" width="60" height="240">
              <path class="line" 
                      d="M30 20v200" 
                data-d2="M30 100v120"
              />
            </svg>
          </div>
          <div class="logo-letter letter-m">
            <svg class="bounced" viewBox="0 0 340 240" width="340" height="240" fill="none" fill-rule="evenodd">
              <path class="line" 
                      d="M240,220 L240,60 C240,28.954305 231.344172,20 220.666667,20 C171.555556,20 254.832031,20 170,20 C85.1679688,20 168.444444,20 119.333333,20 C108.655828,20 100,28.954305 100,60 L100,220" 
                data-d2="M310,220 L310,60 C310,28.954305 301.344172,20 290.666667,20 C241.555556,20 254.832031,110 170,110 C85.1679688,110 98.4444444,20 49.3333333,20 C38.6558282,20 30,28.954305 30,60 L30,220" 
                data-d3="M310,220 L310,60 C310,28.954305 301.344172,20 290.666667,20 C241.555556,20 254.832031,20 170,20 C85.1679688,20 98.4444444,20 49.3333333,20 C38.6558282,20 30,28.954305 30,60 L30,220" 
              />
            </svg>
          </div>
          <div class="logo-letter letter-e">
            <svg class="bounced" viewBox="0 0 200 240" width="200" height="240">
              <path class="line" d="M50 140h110c10 0 10-40 10-60s0-60-10-60H40c-10 0-10 40-10 60v80c0 20 0 60 10 60h130"/>
            </svg>
          </div>
          <div class="bounce">
            <svg viewBox="0 0 1000 260" width="1000" height="260" fill="none">
              <path d="M630,240 C630,111.154418 608.971354,40 530.160048,40 C451.348741,40 430,127.460266 430,210"/>
            </svg>
            <div class="dot"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS Code

Create a file style.css and paste the code below.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100vh;
}

/* Logo */

.main-logo {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px;
}

.logo-animation-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 12%;
  
}

.logo-animation {
  pointer-events: none;
  overflow: visible;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1000px;
  height: 240px;
  margin: -120px 0 0 -500px;
  transform: scale(.633333);
}

.anime-logo {
  overflow: visible;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 1000px;
  height: 120px;
}

.anime-logo-signs {
  overflow: visible;
  display: flex;
  align-items: flex-end;
  position: relative;
  width: 100%;
  height: 512px;
  margin-top: -352px;
}

.logo-letter {
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  height: 100%;
}

.bounced {
  transform-origin: 50% 100% 0px;
  transform: translateY(200px) scaleX(.55) scaleY(.8);
}

.logo-animation .bounce {
  overflow: visible;
  position: absolute;
  left: 0;
  bottom: 70px;
  /*stroke: red;*/
}

.logo-animation .dot {
  opacity: 0.001;
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  background-color: currentColor;
  transform: translate3d(0,0,0);
}

.logo-animation .logo-letter svg {
  overflow: visible;
  fill: none;
  fill-rule: evenodd;
}

.logo-animation .line {
  fill: none;
  fill-rule: evenodd;
  stroke-linecap: square;
  stroke-width: 40;
  stroke: currentColor;
}

.logo-animation .fill {
  opacity: .001;
  stroke: currentColor;
  stroke-width: 40px;
}

.logo-text {
  opacity: .001;
  margin-top: .25em;
  font-weight: 400;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .125em;
  text-align: justify;
  word-break: keep-all;
}

.logo-text:after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 0;
  font-size: 0;
  line-height: 0;
}

JavaScript Code

Create a file script.js and paste the code below.

function fitElementToParent(el, padding, exception) {
var timeout = null;
function resize() {
  if (timeout) clearTimeout(timeout);
  anime.set(el, {scale: 1});
  if (exception) anime.set(exception, {scale: 1});
  var pad = padding || 0;
  var parentEl = el.parentNode;
  var elOffsetWidth = el.offsetWidth - pad;
  var parentOffsetWidth = parentEl.offsetWidth;
  var ratio = parentOffsetWidth / elOffsetWidth;
  var invertedRatio = elOffsetWidth / parentOffsetWidth;
  timeout = setTimeout(function() {
    anime.set(el, {scale: ratio});
    if (exception) anime.set(exception, {scale: invertedRatio});
  }, 10);
}
resize();
window.addEventListener('resize', resize);
}

// main logo animation

var logoAnimation = (function() {

  var logoAnimationEl = document.querySelector('.logo-animation');
  var bouncePath = anime.path('.bounce path');

  fitElementToParent(logoAnimationEl, 0, '.bounce svg');

  anime.set(['.letter-a', '.letter-n', '.letter-i'], {translateX: 70});
  anime.set('.letter-e', {translateX: -70});
  anime.set('.dot', { translateX: 630, translateY: -200 });

  var logoAnimationTL = anime.timeline({
    autoplay: false,
    easing: 'easeOutSine'
  })
  .add({
    targets: '.letter-i .line',
    duration: 0,
    begin: function(a) { a.animatables[0].target.removeAttribute('stroke-dasharray'); }
  }, 0)
  .add({
    targets: '.bounced',
    transformOrigin: ['50% 100% 0px', '50% 100% 0px'],
    translateY: [
      {value: [150, -160], duration: 190, endDelay: 20, easing: 'cubicBezier(0.225, 1, 0.915, 0.980)'},
      {value: 4, duration: 120, easing: 'easeInQuad'},
      {value: 0, duration: 120, easing: 'easeOutQuad'}
    ],
    scaleX: [
      {value: [.25, .85], duration: 190, easing: 'easeOutQuad'},
      {value: 1.08, duration: 120, delay: 85, easing: 'easeInOutSine'},
      {value: 1, duration: 260, delay: 25, easing: 'easeOutQuad'}
    ],
    scaleY: [
      {value: [.3, .8], duration: 120, easing: 'easeOutSine'},
      {value: .35, duration: 120, delay: 180, easing: 'easeInOutSine'},
      {value: .57, duration: 180, delay: 25, easing: 'easeOutQuad'},
      {value: .5, duration: 190, delay: 15, easing: 'easeOutQuad'}
    ],
    delay: anime.stagger(80)
  }, 1000)
  .add({
    targets: '.dot',
    opacity: { value: 1, duration: 100 },
    translateY: 250,
    scaleY: [4, .7],
    scaleX: { value: 1.3, delay: 100, duration: 200},
    duration: 280,
    easing: 'cubicBezier(0.350, 0.560, 0.305, 1)'
  }, '-=290')
  .add({
    targets: '.letter-m .line',
    easing: 'easeOutElastic(1, .8)',
    duration: 600,
    d: function(el) { return el.dataset.d2 },
    begin: function(a) { a.animatables[0].target.removeAttribute('stroke-dasharray'); }
  }, '-=140')
  .add({
    targets: ['.letter-a', '.letter-n', '.letter-i', '.letter-e'],
    translateX: 0,
    easing: 'easeOutElastic(1, .6)',
    duration: 800,
    delay: anime.stagger(40, {from: 2.5}),
    change: function(a) { a.animatables[2].target.removeAttribute('stroke-dasharray'); }
  }, '-=600')
  .add({
    targets: '.letter-m .line',
    d: function(el) { return el.dataset.d3 },
    easing: 'spring(.2, 200, 3, 60)',
  }, '-=680')
  .add({
    targets: '.dot',
    translateX: bouncePath('x'),
    translateY: bouncePath('y'),
    rotate: {value: '1turn', duration: 790},
    scaleX: { value: 1, duration: 50, easing: 'easeOutSine' },
    scaleY: [
      { value: [1, 1.5], duration: 50, easing: 'easeInSine' },
      { value: 1, duration: 50, easing: 'easeOutExpo' }
    ],
    easing: 'cubicBezier(0, .74, 1, .255)',
    duration: 800
  }, '-=1273')
  .add({
    targets: '.dot',
    scale: 1,
    rotate: '1turn',
    scaleY: {value: .5, delay: 0, duration: 150, delay: 230},
    translateX: 430,
    translateY: [
      {value: 244, duration: 100},
      {value: 204, duration: 200, delay: 130},
      {value: 224, duration: 225, easing: 'easeOutQuad', delay: 25}
    ],
    duration: 200,
    easing: 'easeOutSine'
  }, '-=474')
  .add({
    targets: '.letter-i .line',
    transformOrigin: ['50% 100% 0', '50% 100% 0'],
    d: function(el) { return el.dataset.d2 },
    easing: 'cubicBezier(0.400, 0.530, 0.070, 1)',
    duration: 80
  }, '-=670')
  .add({
    targets: '.logo-letter',
    translateY: [
      {value: 40, duration: 150, easing: 'easeOutQuart'},
      {value: 0, duration: 800, easing: 'easeOutElastic(1, .5)'}
    ],
    strokeDashoffset: [anime.setDashoffset, 0],
    delay: anime.stagger(60, {from: 'center'})
  }, '-=670')
  .add({
    targets: '.bounced',
    scaleY: [
      {value: .4, duration: 150, easing: 'easeOutQuart'},
      {value: .5, duration: 800, easing: 'easeOutElastic(1, .5)'}
    ],
    delay: anime.stagger(60, {from: 'center'})
  }, '-=1090')
  .add({
    targets: '.logo-text',
    translateY: [
      {value: 20, easing: 'easeOutQuad', duration: 100},
      {value: 0, easing: 'easeOutElastic(1, .9)', duration: 450}
    ],
    opacity: {value: [0.001, 1], duration: 50},
    duration: 500
  }, '-=970')
  .add({
    targets: '.main-logo-circle',
    opacity: {value: [0.001, 1], duration: 1500},
    backgroundImage: ['linear-gradient(-135deg, #FFFFFF 50%, #F6F4F2 75%, #F6F4F2 100%, #DDDAD7 100%)', 'linear-gradient(-135deg, #FFFFFF 5%, #F6F4F2 40%, #F6F4F2 70%, #DDDAD7 100%)'],
    translateY: {value: ['60px', 0], easing: 'cubicBezier(0.175, 0.865, 0.245, 0.840)'},
    duration: 2000,
    easing: 'easeInOutQuad'
  }, '-=970')
  .add({
    targets: ['.description-title','.description-paragraph'],
    opacity: {value: [0.001, 1], easing: 'cubicBezier(0.175, 0.865, 0.245, 0.840)'},
    translateY: {value: ['80px', 0], easing: 'cubicBezier(0.175, 0.865, 0.245, 0.840)'},
    duration: 3500,
    delay: anime.stagger(75)
  }, '-=1300')

  return logoAnimationTL;

})();


logoAnimation.play();