Animated pride flags | Josh W. Comeau

If you ever wanted to make a cool, animated flag from scratch on the web, Josh has you covered. But the article is also full of clever tricks for animation in general.

On using CSS variables to stagger the amount of movement across otherwise identical elements, to create momentum and physics:

What if we wanted this number to be dynamic? For example, wouldn't it be cool if each column had a slightly different billow amount? Like a real flag attached to a flagpole?

It turns out, we can do this with CSS Variables!
@keyframes oscillate {
  from {
    transform: translateY(var(--billow));
  }
  to {
    transform: translateY(calc(var(--billow) * -1));
  }
}

On setting up animations to start midway through their run cycle by using negative delays:

It turns out, we can use a negative value for animation-delay!

For example, if we set animation-delay: -200ms, the animation will run immediately, but it will act as though it has already been running for 200ms.

Explore Other Notes

Newer

Follow any web feed from Mastodon

Just mention @birb in a post to Mastodon with a link, and RSS Parrot will search the site for any kind of feed, convert that feed to an RSS output, and then launch a Mastodon account that […]
  • If you ever wanted to make a cool, animated flag from scratch on the web, Josh has you covered. But the article is also full of clever tricks for animation in […]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.