Skip to content
Advertisement

Anime.js – pause between loop iterations

I have this animation:

const brushKeyframes = {
  translateX: [
    { value: -150, duration: 200, delay: 100 },
    { value: -180, duration: 200, delay: 200 },
    { value: 0, duration: 200, delay: 300 }
  ],
  translateY: [
    { value: -160, duration: 200, delay: 100 },
    { value: 0, duration: 200, delay: 300 }
  ]
};

const paintingIconAnimation = anime({
  targets: `.painting-icon__brush`,
  ...brushKeyframes,
  delay: 400,
  easing: "linear",
  loop: true
});
.icon {
  width: 150px;
  height: 150px;
}

svg {
  width: 100%;
  height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.1.0/anime.min.js"></script>
<div class="icon painting-icon">
        <svg enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
          <g class="painting-icon__egg">
            <path d="m174.233 41.593c82.515-.993 178.916 120.817 180.664 266.089 1.179 97.995-77.403 170.322-175.398 171.501-97.996 1.18-178.296-69.235-179.475-167.23-1.748-145.273 91.693-269.367 174.209-270.36z" fill="#f1cd88"></path>
            <path d="m174.233 41.593c-7.254.087-14.592 1.145-21.942 3.066 76.061 19.681 154.906 131.769 156.485 263.023 1.095 90.996-66.589 159.847-154.724 170.164 8.318.978 16.811 1.441 25.446 1.337 97.995-1.179 176.577-73.506 175.398-171.501-1.747-145.272-98.148-267.082-180.663-266.089z" fill="#ebb34c"></path>
            <g class="painting-icon__egg-top egg-top">
              <path class="egg-top__main" d="m174.233 41.593c-51.847.624-108 49.855-142.151 122.395h21.135c23.712 0 42.934 19.222 42.934 42.934v112.7c0 16.066 13.024 29.091 29.091 29.091s29.091-13.024 29.091-29.091v-111.88c0-13.136 10.649-23.785 23.785-23.785s23.785 10.649 23.785 23.785v19.501c0 10.004 8.11 18.114 18.114 18.114s18.114-8.11 18.114-18.114v-24.116c0-31.227 25.315-56.542 56.542-56.542h17.192c-36.051-63.885-89.226-105.574-137.632-104.992z" fill="#80b6fc"></path>
              <path class="egg-top__shadow" d="m269.115 152.695c7.678-3.899 16.357-6.111 25.557-6.111h17.192c-9.042-16.022-19.656-31.524-31.786-45.649-.141-.164-.283-.328-.424-.491-21.474-24.876-49.943-47.782-81.52-55.86-.21-.054-.42-.11-.63-.163-15.88-3.956-30.328-3.651-45.214.238 42.821 11.08 86.523 51.449 116.825 108.036z" fill="#62a4fb"></path>
            </g>
          </g>
          <g class="painting-icon__basket">
            <path d="m416.187 479.198h-137.091c-11.242 0-20.355-9.113-20.355-20.355v-111.1h177.801v111.1c0 11.242-9.113 20.355-20.355 20.355z" fill="#766d78"></path>
            <path d="m405.767 347.743v111.1c0 11.242-9.113 20.355-20.355 20.355h30.775c11.242 0 20.355-9.113 20.355-20.355v-111.1z" fill="#655e67"></path>
            <path d="m238.131 314.955v40.948c0 5.394 4.373 9.767 9.767 9.767h199.488c5.394 0 9.767-4.373 9.767-9.767v-40.948c0-5.394-4.373-9.767-9.767-9.767h-199.488c-5.394 0-9.767 4.373-9.767 9.767z" fill="#f7f3f1"></path>
            <path d="m447.386 305.188h-30.776c5.394 0 9.767 4.373 9.767 9.767v40.948c0 5.394-4.373 9.767-9.767 9.767h30.775c5.394 0 9.767-4.373 9.767-9.767v-40.948c.001-5.394-4.372-9.767-9.766-9.767z" fill="#ebe1dc"></path>
            <ellipse cx="347.642" cy="419.499" fill="#80b6fc" rx="39.651" ry="24.365"></ellipse>
          </g>
          <g class="painting-icon__brush">
            <path d="m378.767 166.038c-20.7-20.702-54.483-20.672-75.149.065-8.107 8.135-13.015 18.246-14.755 28.778 0 0-5.274 29.198-20.47 44.545-4.268 4.31-3.721 11.409 1.321 14.781 32.361 21.645 81.521 14.441 109.052-13.09 20.732-20.733 20.733-54.346.001-75.079z" fill="#766d78"></path>
            <path d="m378.767 166.038c-1.585-1.585-3.255-3.034-4.981-4.376 5.761 18.278 1.412 39.054-13.077 53.543-22.6 22.6-59.767 31.486-90.26 21.977-.666.772-1.347 1.527-2.056 2.243-4.268 4.31-3.721 11.409 1.321 14.781 32.361 21.645 81.521 14.441 109.052-13.09 20.732-20.731 20.733-54.345.001-75.078z" fill="#655e67"></path>
            <path d="m351.356 193.446c-14.285-14.285-13.235-37.749 2.269-50.701l126.132-105.374c7.805-6.521 19.297-6.007 26.489 1.185s7.706 18.683 1.185 26.489l-105.374 126.132c-12.952 15.504-36.415 16.554-50.701 2.269z" fill="#94d4a2"></path>
            <path d="m506.245 38.557c-2.857-2.857-6.394-4.641-10.107-5.369.247 4.778-1.705 10.224-5.734 14.831l-108.011 123.493c-10.756 12.298-26.327 17.188-37.517 12.938 1.613 3.239 3.769 6.283 6.481 8.995 14.285 14.285 37.749 13.235 50.701-2.269l105.373-126.131c6.52-7.805 6.006-19.297-1.186-26.488z" fill="#6dc17d"></path>
          </g>
        </svg>
      </div>

I want to make a pause between animation loops: so when brush returns to the final point, it will stay here a bit before new movement starting. But I have no idea how to fix animation (timings, maybe?) properly to achieve it.

Thank you in advance!

Advertisement

Answer

Ok, finally I got it.

In arrayed keyframes in anime.js delays are not absolute, but kind of relative to each other. So I can fix delays in the array like that:

const brushKeyframes = {
  translateX: [
    { value: -150, duration: 130, delay: 1300 },
    { value: -180, duration: 130, delay: 100 },
    { value: 0, duration: 130, delay: 100 }
  ],
  translateY: [
    { value: -160, duration: 130, delay: 1300 },
    { value: 0, duration: 130, delay: 100 }
  ]
};

and it will work properly

Advertisement