{"id":4277,"date":"2024-10-29T07:45:59","date_gmt":"2024-10-29T12:45:59","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=4277"},"modified":"2024-11-21T13:22:37","modified_gmt":"2024-11-21T18:22:37","slug":"scroll-driven-sections","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/scroll-driven-sections\/","title":{"rendered":"Scroll-Driven… Sections"},"content":{"rendered":"\n

I was checking out a very cool art-directed article<\/a> the other day, full of scrollytelling<\/em>, and, like us web devs will be forever cursed to do, wondering what they used to build it. Spoiler: it’s GSAP<\/a> and ScrollTrigger<\/a>. <\/p>\n\n\n\n

No shame in those tech choices, they are great. But with scroll-driven animations<\/a> now being a web standard with growing support<\/a>, it begs the question whether we could do this with native technologies.<\/p>\n\n\n\n

My brain focused on one particular need of the scrollytelling style:<\/p>\n\n\n\n

    \n
  1. While the page scrolls through a particular section<\/em><\/li>\n\n\n\n
  2. Have a child element appear in a fixed position and be animated<\/em><\/li>\n\n\n\n
  3. … but before and after this section is being scrolled through, the element is hidden<\/li>\n<\/ol>\n\n\n\n

    Perhaps a diagram can help drive that home:<\/p>\n\n\n

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

    But I was immediately confused when thinking about how to do this with scroll-driven animations. The problem is that that “section” itself is the thing we need to apply the animation-timeline: view();<\/code> to, such that we have the proper moment to react to (“the section is currently in view!<\/em>“).<\/strong> But in my diagram above, it’s actually a <blockquote><\/code> that we need to apply special conditional styling to, not the section. In a @keyframe<\/code> animation, all we can do is change declarations, we can’t select other elements. Apologies if that confusing, but the root of is that we need to transfer styles from the section to the blockquote without using selectors \u2014 and it’s weird.<\/p>\n\n\n\n

    The good news is that what we can do is update CSS custom properties on the section, and those values will cascade to all the children of the section, and we can use those to style the blockquote.<\/p>\n\n\n\n

    First, in order to make a custom property animatable, we need to declare it’s type. Let’s do a fade in first, thus we need opacity:<\/p>\n\n\n

    @property<\/span> --blockquoteOpacity {\n  syntax<\/span>: \"<percentage<\/span>>\";\n  inherits<\/span>: true<\/span>;\n  initial-value<\/span>: 0%;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    Now the section itself has the animation timeline:<\/p>\n\n\n
    section<\/span>.has-pullquote<\/span> {\n  animation<\/span>: reveal linear both;\n  animation-timeline<\/span>: view<\/span>();\n  animation-range<\/span>: cover 0%<\/span> cover 100%<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    And that animation we’ve named reveal<\/code> above can now update the custom property:<\/p>\n\n\n
    @keyframes<\/span> reveal {\n  from<\/span> {\n    --blockquoteOpacity<\/span>: 0%<\/span>;\n  }\n  to<\/span>% {\n    --blockquoteOpacity<\/span>: 100%<\/span>;\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    Now as the animation runs, based on it’s visibility in the viewport, it will update the custom property and thus fade\/in out the blockquote:<\/p>\n\n\n
    blockquote<\/span> {\n  opacity<\/span>: var<\/span>(--blockquoteOpacity);\n\n  position<\/span>: sticky;\n  top<\/span>: 50%<\/span>;\n  transform<\/span>: translateY<\/span>(-50%<\/span>);\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    Note I’m using position: sticky<\/code> in there too, which will keep our blockquote in the middle of the viewport while we’re cruising through that section. <\/p>\n\n\n\n
    Try it out (Chrome ‘n’ friends have stable browser support):<\/p>\n\n\n\n