{"id":4327,"date":"2024-11-04T11:22:35","date_gmt":"2024-11-04T16:22:35","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=4327"},"modified":"2024-11-21T13:23:09","modified_gmt":"2024-11-21T18:23:09","slug":"named-scroll-view-timelines","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/named-scroll-view-timelines\/","title":{"rendered":"Named Scroll & View Timelines"},"content":{"rendered":"\n

I just blogged about<\/a> a way to pass information from an element that had a view timeline on itself down to it’s descendent elements. The idea is to set up CSS custom properties with @property<\/code> and the @keyframe<\/code> would animate those, thus the descendent’s would have access to them.<\/p>\n\n\n\n

It worked fine<\/a> (noting that scroll-driven animations are, so far, only in Chrome). <\/p>\n\n\n\n

But Bramus noted<\/a> that another possibility there was to name<\/em> the view timeline and have the children reference that instead<\/em>. His video on this<\/a> is informative. <\/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

    The update to my original demo was pretty easy to do. Remember it had a section with a “pull quote”. The section had the view timeline, the pull quote is what I was trying to animate. So here I name<\/em> the timeline (and note the scroll direction: block<\/code> means vertical in logical property world):<\/p>\n\n\n

    .has-pullquote<\/span> {\n<\/span><\/span>  animation<\/span>: reveal linear both;\n<\/span><\/span>  animation-timeline<\/span>: view<\/span>();\n<\/span><\/span>  animation-range<\/span>: cover 0%<\/span> cover 100%<\/span>;\n<\/span><\/span>  view-timeline<\/span>: --section-pullquote block;\n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    You have to name the timeline with a --double-sash<\/code> name like that, which in modern CSS parlance is referred to as custom ident. <\/em><\/strong>It looks like a custom property but it isn’t, it’s just a unique name. <\/p>\n\n\n\n
    Now that the timeline is named, any descendent can reference it for it’s own<\/em> animation timeline. Again specific to my demo, I switched things up to work like this (just the basics):<\/p>\n\n\n
    blockquote<\/span> {\n<\/span><\/span>  \/* Pull quote styling... *\/<\/span> \n<\/span><\/span>  \n<\/span><\/span>  animation<\/span>: blockquote linear both;\n<\/span><\/span>  animation-timeline<\/span>: --section-pullquote;\n<\/span><\/mark>}\n<\/span><\/span>\n<\/span><\/span>@keyframes<\/span> blockquote {\n<\/span><\/span>  from<\/span> {\n<\/span><\/span>    opacity<\/span>: 0<\/span>;\n<\/span><\/span>  }\n<\/span><\/span>  to<\/span> {\n<\/span><\/span>    opacity<\/span>: 1<\/span>;\n<\/span><\/span>  }\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    Here’s an updated demo<\/a> using that technique instead of animating all custom properties.<\/p>\n\n\n\n