Features

Due to the numerous movements and animations involved, I needed to create several components, each with its own variants. These are all nested within a big main component that wraps everything. This approach has simplified the management of diverse animation interactions.

For instance, I've designed a component for each illustration. These illustration components have an "Out" and an "In" variant, enabling smooth animation as we transition from "Out" to "In".

Take the buttons as another example. There's a single component, which I can modify to craft every button, with the help of component properties and variables. This component has all the necessary variants for the button: an "Active" state for a scaled up version, and an "Inactive" version for a scaled-down and more transparent variant.

Using the same idea, I've split other parts of the interaction into smaller bits. Then, I tuck these components into the "Main component" to make the final variants of the interaction.