In Framer Motion, I'm trying to get two colors to animate smoothly. The colors are red 'hsl(0, 100, 50)' and blue 'hsl(240, 100, 50)'. Unfortunately, the animation is going through the color wheel, making pit stops at orange, yellow, green, cyan, etc. How do I get it to switch "direction" and transition smoothly from red, then violet, then blue?
1 Answers
Although this is surprisingly simple to do, it is not at all initially obvious to do this.
This is wrong: animate={{ backgroundColor: ['hsl(0, 100, 50)', 'hsl(240, 100, 50)] }},
while this is right: animate={{ backgroundColor: ['hsl(0, 100, 50)', 'hsl(-120, 100, 50)'] }}.
(Just in case anybody is confused about where this code goes, "animate" is a prop within the motion.div element. For more examples, please looks at these examples from the docs: https://www.framer.com/api/motion/examples/)
Related