Luna  Hermann

Luna Hermann

1626361941

Scroll-linked animations only using CSS?! Featuring Adam Argyle

None other than @Adam Argyle has jumped on to help teach me about @scroll-timeline! Make sure to give Adam a follow on Twitter and check out everything he’s up to (links below).

Animations are part of CSS, but we often have to use JavaScript to trigger the animations themselves. Well, that’s starting to change now with the help of @scroll-timeline, which opens the doors to scroll-linked animations!

As of the time of recording, this is a VERY new, and only available behind a flag in Chrome Canary, but that doesn’t mean we shouldn’t explore it! If anything, it means that maybe we should play with it even more, as we discuss in the video (along with how it works, of course!)

🔗 Links
Chrome Canary: https://www.google.com/intl/en_ca/chrome/canary/
Bramus links mentioned:

⌚ Timestamps

  • 00:00 - Introduction
  • 00:55 - About Adam Argyle
  • 01:40 - Creating a read progression bar
  • 14:47 - Fade in navigation with scroll offsets
  • 27:54 - Fade an image in/out
  • 34:37 - time range and animation duration relationship
  • 38:56 - Animating a clip-path
  • 42:44 - @supports and @prefers-reduced-motion
  • 46:32 - How long do we have to wait?

#css #web-development #programming #developer

Scroll-linked animations only using CSS?! Featuring Adam Argyle