Lukebailey/infra 387 explore and create a micro interaction

[lukerohanbailey]

Summary

The task here was to explore and create a micro-interaction for the checkbox component in the ui-kit. Primarily the PR is a lofi suggestion for how we could setup micro-interactions for components. There are decisions and discussion to be had around:

• The animateIcons directory placement and general approach of segregating animation and static icons
• Centralising easing and timing values as constants we can use throughout the ui-kit
• Mixing of CSS transitions and GSAP. Im still not sure if the slight performance benefits of CSS transitions trumps the flexibility and unification of setting up all animation in GSAP. I'm also open to looking at other animation libraries like react-spring or framer-motion

References

• Loom
• Icon Animation Thread
• Linear
• CSS Tricks stroke-dashoffset article
• Figma