Success State Animations

Animations for successful actions and positive feedback.

Draw Checkmark

Animate an SVG checkmark to look like it is being drawn.

anime({
  targets: '#success-draw-check .checkmark',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 1000,
  loop: true,
  direction: 'alternate'
});

Pop In

A circle pops in, then reveals a checkmark.

const timeline = anime.timeline({
  easing: 'easeOutExpo',
  loop: true,
});
timeline.add({
  targets: '#success-pop-in .circle',
  scale: [0, 1],
  opacity: [0, 1],
  duration: 400
}).add({
  targets: '#success-pop-in .checkmark',
  strokeDashoffset: [anime.setDashoffset, 0],
  duration: 400,
}).add({
  targets: ['#success-pop-in .circle', '#success-pop-in .checkmark'],
  opacity: 0,
  duration: 500,
  delay: 1000
});