Developer question about mark complete animation

[Autumn]

Hi,

I love Trello and especially loving the checkmark animation that occurs when marking a task complete.

I'm a software developer and was wondering how the animation was implemented? Do you guys use package or something custom? (see image below)

Thanks

[Aman Jaiman]

Hi Autumn!

No packages for that animation! Just custom CSS for the lines and timing and then rendering logic for when to show the lines and when to make the checkmark wiggle.

[Autumn]

Awesome! I love the animation so much I keep on spamming it to see the animation haha (Noticed colorful animation on random as well!) It’s so modern and nice - whoever designed / coded up deserves an applause!

Would it be possible to share snippet/ screenshot of the css and code implementation? I want to learn how it’s done from the best and the original

[Aman Jaiman]

We render a list of "lines" which are just small rectangles. Then in the CSS we set the rotation amount for each line that is rendered

&:nth-child(1) {
  --rotation: 0deg;

  transform: rotate(var(--rotation)) translate(11px);
}
&:nth-child(2) {
  --rotation: 45deg;

  transform: rotate(var(--rotation)) translate(11px);
}
&:nth-child(3) {
  --rotation: 90deg;

  transform: rotate(var(--rotation)) translate(11px);
}
...

Then for every alternating line we set a different animation:

&:nth-child(1),
&:nth-child(3),
&:nth-child(5),
&:nth-child(7) {
  &.lineAnimation {
    @media (prefers-reduced-motion: no-preference) {
      animation: orthogonalLineAnimation 0.8s ease-in-out;
    }
  }
}
&:nth-child(2),
&:nth-child(4),
&:nth-child(6),
&:nth-child(8) {
  &.lineAnimation {
    @media (prefers-reduced-motion: no-preference) {
      animation: diagonalLineAnimation 0.8s ease-in-out;
    }
  }
}

And here's the animation for each:

@keyframes orthogonalLineAnimation {
  0% {
    transform: rotate(var(--rotation)) translate(11px) scaleX(1);
    opacity: 0;
  }
  25% {
    transform: rotate(var(--rotation)) translate(12px) scaleX(2);
    opacity: 1;
  }
  75% {
    transform: rotate(var(--rotation)) translate(13px) scaleX(1.5);
    opacity: 0.5;
  }
  100% {
    transform: rotate(var(--rotation)) translate(13px) scaleX(1);
    opacity: 0;
  }
}
@keyframes diagonalLineAnimation {
  0% {
    transform: rotate(var(--rotation)) translate(11px) scaleX(1);
    opacity: 0;
  }
  25% {
    transform: rotate(var(--rotation)) translate(12px) scaleX(1.5);
    opacity: 0.5;
  }
  50% {
    transform: rotate(var(--rotation)) translate(12px) scaleX(1.5);
    opacity: 1;
  }
  75% {
    transform: rotate(var(--rotation)) translate(13px) scaleX(1);
    opacity: 0.05;
  }
  100% {
    transform: rotate(var(--rotation)) translate(13px) scaleX(1);
    opacity: 0;
  }
}
 

[Autumn]

I was not expecting a reply but thank you so much for the detailed explanation!! You rock! 🤘