I’ve finished the core of moving my site from Squarespace to Webflow, and I really love the flexibility the Webflow platform gives me. While I was tinkering, I came up with a pretty slick approach to using the Hue shift animation. Since I make digital, abstract art using fractals and other procedural techniques, the specific hues of my art don’t matter nearly as much as their relationships to each other within a render. As a result, I can change the hue of my art wildly and still produce pretty incredible results. On my old site, I’d catch a lot of comments like “I like that one, but I wish it came in X colors.” It’s easy for me to accommodate that kind of request when someone places an order, so I’ve been thinking about ways to effectively communicate it in an engaging way.
Currently on my site, I have a toy button titled “Trip the Colors!”. When you click it, it sends my art through a loop around the Hue wheel. It’s really neat, and lots of users are enjoying already, but I want to take it a step further. In my ideal world, there’d be values defined in the CMS for each Art Post that represent Hue rotations. So I could say “On this art, the Vaporwave colors are at a 37 degree rotation, the Tropical colors are at the 42 degree rotation, and the Sunest colors are at 119 degrees”, then have “Vaporwave”, “Tropical”, and “Sunset” colors buttons that would animate a Hue shift to the specified location on the Hue wheel. Because “Vaporwave” won’t be defined at the same spot for each art, and may use different subsets of themeing options (not every piece has a good “vaporwave”), these definitions will be built within the Art Post (Daily Doses of Art) CMS definition. I think I’m pretty comfortable arranging the data, but my question is about making the animation dynamic.
Currently, I only know how to tell the Hue to shift to a hardcoded value, is there any way to pass a dynamic value to the Hue shift for it’s rotation target?
Here is my public share link: LINK
(how to access public share link)