This week: make a face look like it’s chewing. I got well acquainted with animation functions, to swap two SVGs (one wide mouthed, one narrow).
It’s animating the color:
And the SVG classes get the animation, with opposing directions:
animation-timing-function: steps(2, start)
# same as above...
Since the color became halved, there was some manual color matching instead of inheriting the normal color:
color: adjust-color(adjust-color($active_blue, $saturation: 61, $lightness: -24), $blue: 20, $green: 20)
And that’s why I’m glad the project’s using SASS.