The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 2)

 By Bram.us - 2021-03-09

Description

Let's take a look at how we can create Scroll-Linked Animations that use Element-based Offsets using @scroll-timeline from the “Scroll-linked Animations“ CSS Specification.

Summary

  • The Scroll-linked Animations Specification is an upcoming addition to CSS that defines a way for creating animations that are linked to a scroll offset of a scroll container.
  • to no clipping at all, which looks like a curtain opening.
  • As our animation reaches 100% only when the image has already slid out of scrollport (at the top), we can never see the image as a whole — it’s always clipped while inside the scrollport.
  • As also mentioned in the first part of this series it’s pretty annoying when it comes to creating scroll-timelines for many individual items as the selector() function requires you to pass an id into it.

 

Topics

  1. Frontend (0.16)
  2. UX (0.12)
  3. Backend (0.09)

Similar Articles

A Complete Guide to Flexbox

By CSS-Tricks - 2020-12-03

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and ...

By CSS { In Real Life } | A Utility Class for Covering Elements - 2020-12-11

An Interactive Guide to CSS Transitions

By joshwcomeau - 2021-03-06

This comprehensive guide shows how to use CSS transitions! A back-to-basics look at the fundamental building blocks we need to create microinteractions and other animations.

The Rules of Margin Collapse

By joshwcomeau - 2020-12-11

“Margin collapse” has a dastardly reputation, one of the trickier parts of CSS. Fortunately, it gets a lot easier once you learn a few rules! In this tutorial, we take a deep dive into the governing p ...

By Responsible Web Applications - 2021-02-16

HTML and CSS Tips and Tricks for creating applications that are both responsive and accessible out of the box