{"id":4365,"date":"2024-11-11T12:36:23","date_gmt":"2024-11-11T17:36:23","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=4365"},"modified":"2024-11-21T13:22:13","modified_gmt":"2024-11-21T18:22:13","slug":"scoped-scroll-timelines","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/scoped-scroll-timelines\/","title":{"rendered":"(Up-) Scoped Scroll Timelines"},"content":{"rendered":"\n

I keep learning little details about scroll-driven animations! <\/p>\n\n\n\n

I started this little journey thinking about if you wanted to do special styling when a page scrolled through a certain section<\/a>. I thought then that in order to pass scrolling information to descendants, you’d have to do it with --custom-properties<\/code>. That’s sometimes still a decent idea, but it’s not strictly true, as those descendants can inherit a named timeline<\/a> and tap into that to do styling on themselves. <\/p>\n\n\n\n

Then I thought, while that’s a nice improvement, it’s still limited in the sense that only descendants can tap into a higher-up-the-DOM element’s timeline. Like an enforced parent\/child situation. Turns out this isn’t true either, and again thanks to Bramus<\/a> for showing me how it works. <\/p>\n\n\n\n

Since we’re three-deep here on this journey, I figure calling it a series makes sense:<\/p>\n\n\n

\n
\n

Article Series<\/h3>\n <\/header>\n
\n
    \n
  1. \n Scroll-Driven… Sections<\/a>\n <\/li>\n
  2. \n Named Scroll & View Timelines<\/a>\n <\/li>\n
  3. \n (Up-) Scoped Scroll Timelines<\/a>\n <\/li>\n <\/ol>\n <\/div>\n<\/div>\n\n\n\n

    Fair warning all this stuff is Chrome ‘n’ friends only right now. But I’ve seen flags in both Safari and Firefox so it’s coming along.<\/p>\n\n\n\n

    You can have any element on the page “listen” to a scroll (or view) timeline of a totally different element.<\/h2>\n\n\n\n

    That’s the rub. <\/p>\n\n\n\n

    I wrongly assumed it had to be a parent\/child thing (or parent\/descendant). By default, that’s true, but if you intentionally move the scope of the timeline to another element up the DOM, you can make it work for any elements. <\/p>\n\n\n\n

    I’ll illustrate:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Demo of that:<\/p>\n\n\n\n