flâneur

Easier scrollytelling with position sticky

pudding.cool · 701 words · saved by 1 readers

We’ve written a lot about scrollytelling here at The Pudding. We’ve covered everything from a library comparison, to responsive best practices, to a deep-dive into Scrollama. But there is always room for improvement. One of the biggest implementation pains with scrollytelling is the sticky graphic pattern, whereby the graphic scrolls into view, becomes “stuck” for a duration of steps, then exits and “unsticks” when the steps conclude. This post will focus on the easiest solution we’ve come up with yet: offloading the sticky complexity to CSS, using position: sticky. The short version: when using the sticky graphic pattern, you need a bunch of JavaScript to handle the stuck state, dimensions, etc.. With this approach, that is all done with (minimal) CSS. This means less bugs, less maintenance, and more happiness. Sticky positioning is the unapologetic love child of position: relative and position: fixed (in which said love child grows up to do bigger and better things while still retain

Easier scrollytelling with position sticky Skip to main content Easier scrollytelling with position sticky Leaning on CSS to simplify the process. By Elaina Natario and Russell Samora June 2018 We’ve written a lot about scrollytelling here at The Pudding. We’ve covered everything from a library comparison , to responsive best practices , to a deep-dive into Scrollama . But there is always room for improvement. One of the biggest implementation pains with scrollytelling is the sticky graphic pattern , whereby the graphic scrolls into view, becomes “stuck” for a duration of steps, then exits and

saved by

related reading