Refresh: Homepage - animate flag

[stephaniehobson]

We're moving forward with a SVG/CSS animation for the flag on the homepage. You can use this Slack thread as a starting point.

Respect the user's prefers-reduced-motion settings and there's design direction for a pause animation button in the Figma.

Tess is the best person to go to if you have questions.

[maureenlholland]

Codepen implementation: https://codepen.io/oleaceae/pen/GRVzVdE?editors=1100

[ehot]

Codepen Alt Animation: https://codepen.io/oleaceae/pen/vYoPdOJ (Blinking + Bouncing)

[slightlyoffbeat]

I'd like to string these together, as long as performance allows.

Waving for a period of time. Back to static. Blink. Bounce. Blink. Static. Repeat. Something like that.

[ehot]

https://codepen.io/oleaceae/pen/VwoJzYG @slightlyoffbeat here's a variant that switches between static, to wave, to static, to bounce/blink

[ehot]

https://codepen.io/oleaceae/pen/wvVLrOm <- another variant where it waves for 20s, then winks and bounces for 10s, then stays stationary for 10s, then loops.

[stephaniehobson]

Most recent codepens:
https://codepen.io/slightlyoffbeat/pen/LYwwpgj
https://codepen.io/slightlyoffbeat/pen/XWvvXpg