MWVzNew

index.html

<div class="banner_wrapper marketplace">
  <h2>Attempt to recreate animation with <a href="https://animejs.com/">Anime.js</a> (<a href="https://jakearchibald.github.io/svgomg/">SVGOMG</a>)</h2>
  <div class="banner">
    <svg class="face">
      <defs>
        <!-- Smile -->
        <path id="a" d="M47 22q-.45.85-.95 1.75-.05.1-.15.25-.05.08-.1.15-.362.58-.8 1.15-1.25 1.75-2.9 3.4Q34.8 36 24.5 36q-10.35 0-17.65-7.3Q3.8 25.6 2 22" />
        <!-- Teeth -->
        <path id="b" d="M40.85 32q.15.85.15 1.7 0 3.4-2.4 5.85Q36.2 42 32.85 42q-3.4 0-5.8-2.45-1.05-1.05-1.65-2.3-.2-.35-.4-.75m-1 .45q-.6 1.55-2 2.8Q19.6 42 16.25 42q-3.4 0-5.8-2.25Q8 37.5 8 34.35q0-1.25.4-2.35" />
        <!-- Left eye open -->
        <path id="c" d="M14 10q0 .4-.3.7-.3.3-.7.3-.4 0-.7-.3-.3-.3-.3-.7 0-.4.3-.7.3-.3.7-.3.4 0 .7.3.3.3.3.7Z" />
        <path id="d" d="M21 10q0 3.3-2.35 5.65Q16.3 18 13 18q-3.3 0-5.65-2.35Q5 13.3 5 10q0-3.3 2.35-5.65Q9.7 2 13 2q3.3 0 5.65 2.35Q21 6.7 21 10Z" />
        <!-- Right eye open -->
        <path id="e" d="M44 10q0 3.3-2.35 5.65Q39.3 18 36 18q-3.3 0-5.65-2.35Q28 13.3 28 10q0-3.3 2.35-5.65Q32.7 2 36 2q3.3 0 5.65 2.35Q44 6.7 44 10Z" />
        <path id="f" d="M37 10q0 .4-.3.7-.3.3-.7.3-.4 0-.7-.3-.3-.3-.3-.7 0-.4.3-.7.3-.3.7-.3.4 0 .7.3.3.3.3.7Z" />
        <!-- Right eye closed -->
        <path id="g" d="M42.25 15q-.3.35-.6.65Q39.3 18 36 18q-3.3 0-5.65-2.35-.3-.3-.6-.65" />
        <!-- Nose -->
        <path id="h" d="M29.25 14.8 24 20l6 6m-12 0 6-6" />
      </defs>
      <use xlink:href="#a" />
      <use xlink:href="#b" />
      <use xlink:href="#c" />
      <use xlink:href="#d" />
      <use xlink:href="#e" />
      <use xlink:href="#f" />
      <use xlink:href="#g" />
      <use xlink:href="#h" />
    </svg>
    <span class="number_animate">0</span>

    <svg class="shopping_cart">
      <defs>
        <path id="i" d="M10.75 3H3" />
        <path id="j" d="M21.35 28 10.75 3" />
        <path id="k" d="M48.15 28h-26.8" />
        <path id="l" d="M55 11.55 48.15 28" />
        <path id="m" d="M44.4 36.3q-.6.7-1.4.7-.8 0-1.4-.7-.4-.35-.45-.9-.15-.2-.15-.4h4v.4q-.2.55-.6.9Zm-16 0q-.6.7-1.4.7-.85 0-1.45-.7-.4-.35-.45-.9-.1-.2-.1-.4h4q-.05.2-.05.4-.2.55-.55.9Z" />
      </defs>
      <use xlink:href="#i" />
      <use xlink:href="#j" />
      <use xlink:href="#k" />
      <use xlink:href="#l" />
      <use xlink:href="#m" />
    </svg>

  </div>
</div>

<div class="banner_wrapper">
  <h2><strike>GIF animation with <a href="https://community.adobe.com/t5/animate-discussions/animate-anime-js-a-match-made-in-heaven/m-p/13140599#M356186">Adobe Animate</a></strike></h2>
  <div class="banner">
    <img src="https://i.imgur.com/1ag2XwN.gif">
  </div>
</div>

mwvznew.markdown

MWVzNew

A Pen by BergenBergen BergenBergen on CodePen.

License.

script.babel

var logo = anime.timeline({
  direction: "alternate",
  loop: true
});

logo
  .add({
    targets: ".face path",
    strokeDashoffset: [anime.setDashoffset, 0],
    delay: function (el, i) {
      return i * 250;
    },
    easing: "easeInOutSine",
    duration: 800
  })

  .add({
    targets: [".face path#e", ".face path#f"],
    opacity: 0,
    complete: function(anime) {}
  })

  .add({
    targets: ".marketplace .banner",
    backgroundColor: "#FE9900"
    //delay: 3000
  })

  .add({
    targets: ".face path",
    stroke: "#000",
    strokeWidth: 3
  })

  .add({
    targets: ".number_animate",
    opacity: 1,
    round: 1,
    textContent: 9,
    duration: 2000,
    // delay: 2000,
    easing: "easeInOutQuad",
    complete: function() {
      // https://codepen.io/whatevah/pen/RwMOJgy
      var counter = document.getElementsByClassName("number_animate");
      var text = document.createTextNode("+");
      counter[0].appendChild(text);
    }
  })

  .add({
    targets: ".face",
    opacity: 0
  })

  .add({
    targets: ".shopping_cart path",
    delay: 3000,
    stroke: "#000",
    strokeWidth: 18,
    opacity: 1
  });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.29.0/css-doodle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.3.2/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

style.scss

body {
  font-family: sans-serif;
}

.banner_wrapper {
  display: flex;
  // background: #efefef;
  justify-content: center;
  align_items: center;
  padding: 10px 0 28px;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
}

.banner {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 300px;
  height: 280px;
  // padding-bottom: 30px;
  overflow: hidden;
  position: relative;
  background-color: black;
  color: white;
}

path {
  stroke: #fff;
  fill: none;
  linecap: round;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.face {
  transform: scale(3);
  width: 49px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shopping_cart {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: middle;
  opacity: 0;
  transform: scale(3);
  width: 56px;
  height: 38px;
  margin-left: -20px;
}

.number_animate {
  position: absolute;
  display: flex;
  opacity: 0;
  color: white;
  z-index: 5;
  font-weight: normal;
  font-size: 70px;
  margin: -44px auto 0;
  // right: 5px;
  // justify-content: center;
  // align-items: middle;
}