Component
Recolor Animation in Framer
This is a folder recolor animation recreated in Framer, based on the original concept by Kumail. It’s still crazy that Framer allows no-coders to create these amazing interactions on the web, without any technical knowledge, just by drawing rectangles on a design canvas. And the result isn’t a PNG or a simple prototype. It’s a real, working website on the internet.
Created by
About the resource
Well, well, well... this component is a big one.
In theory, it isn't too complex to build something like this. Everything works the same as with other similar interactions: we're creating components and variants. However, because of how this animation works, we need to create way more variants in this case.
You see, the issue is, we can't use the same variants when moving from blue → red as we do when moving from orange → red. This means every color needs to have defined variants for moving to every other color. Since we have 7 colors, if we do the math, that's going to be 7×6 (42) sweet little variants.
Fun fact: it’s actually a little more than that because each transition from one color to another takes us 3 variants to complete. So the total number of variants we’re going to have is 42x3 (126).
About the resource
Well, well, well... this component is a big one.
In theory, it isn't too complex to build something like this. Everything works the same as with other similar interactions: we're creating components and variants. However, because of how this animation works, we need to create way more variants in this case.
You see, the issue is, we can't use the same variants when moving from blue → red as we do when moving from orange → red. This means every color needs to have defined variants for moving to every other color. Since we have 7 colors, if we do the math, that's going to be 7×6 (42) sweet little variants.
Fun fact: it’s actually a little more than that because each transition from one color to another takes us 3 variants to complete. So the total number of variants we’re going to have is 42x3 (126).
About the resource
Well, well, well... this component is a big one.
In theory, it isn't too complex to build something like this. Everything works the same as with other similar interactions: we're creating components and variants. However, because of how this animation works, we need to create way more variants in this case.
You see, the issue is, we can't use the same variants when moving from blue → red as we do when moving from orange → red. This means every color needs to have defined variants for moving to every other color. Since we have 7 colors, if we do the math, that's going to be 7×6 (42) sweet little variants.
Fun fact: it’s actually a little more than that because each transition from one color to another takes us 3 variants to complete. So the total number of variants we’re going to have is 42x3 (126).
The main Recolor component and its 126+1 variants.
The main Recolor component and its 126+1 variants.
The main Recolor component and its 126+1 variants.
Once you have all this set up, you're good to go - it's just a matter of connecting them with interactions to make sure they respond to mouse clicks.
If you wan to learn more about how I create these interactions and animations in Framer, I highly recommend my crash course on micro-interactions in Framer.
Once you have all this set up, you're good to go - it's just a matter of connecting them with interactions to make sure they respond to mouse clicks.
If you wan to learn more about how I create these interactions and animations in Framer, I highly recommend my crash course on micro-interactions in Framer.
Once you have all this set up, you're good to go - it's just a matter of connecting them with interactions to make sure they respond to mouse clicks.
If you wan to learn more about how I create these interactions and animations in Framer, I highly recommend my crash course on micro-interactions in Framer.
