Trello Checkbox Animation

One of my favorite guys in web development is Sam Selikoff. Some weeks ago he posted this video where he created Trello's fancy checkbox animation that is shown when you complete the last task in the list. He's using ReactJS and the Framer Motion animation library which is unfortunately only available for ReactJS.

Since I love to use VueJS, I wanted to re-build this animation using this framework but I had to use something different than Framer Motion. I researched a bit and tried the popular GSAP animation library and here's the result:

Demo

Code

The icons I used are part of the great Phosphor Icons project. There are many framework/library based integrations available, for example for VueJS, ReactJS, Svelte and some others - really great!

Trello Checkbox Animation

TrelloCheckboxAnimationCompositionAPI.vueTrelloCheckboxAnimationOptionsAPI.vue

Follow-Up

I wanted to be close to Sam's example so it's easier for you to spot the differences. Now it's up to you to improve the code! Use Vue's v-model for the input or create configuration objects for the different animation styles. I would love to see you sharing your code with me on Twitter.