Interaction
Klarna Carousel Advanced Interaction
I challenged myself to recreate this carousel by Hüseyin, in Framer. He originally made it for the new Klarna app page. Interestingly enough, I did this without any code, video components, or pre-made Lottie or Rive files. There were many subtle effects that I aimed to replicate.
About the resource
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.
About the resource
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.
About the resource
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.
The number of components in the Klarna Framer project.
The number of components in the Klarna Framer project.
The number of components in the Klarna Framer project.
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.
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.
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.
