Scrollytelling sticky overlay with a R htmlwidget chart

[d-qn]

Thanks for sharing your experiments ! I am very interested to have scrollytelling with Quarto, but have a R htmlwidget chart as the sticky zone. Do you think it possible and easily achievable in Quarto ? I had a quick look at Scrolloma.js, but I can't say I understand it yet

[jimjam-slam]

Hi @d-qn! It probably depends on what you want the sticky element to do. If you just want it to be there while your text scrolls past, it'll be enough to position and stick the htmlwidget with CSS. If you want it to update or change, I think that's going to be difficult, because you can't have any R code re-run on scroll (unless you're either using Shiny or WebR).

One alternative could be to have three or four different maps and have each show or hide based on scroll position. You'd do this like the purple boxes example, attaching or removing a CSS class to each map and using display: none to remove the ones you aren't showing.

Otherwise, you could check out the {rolldown} package, which is designed to do this with R Markdown. Or, in Quarto, using Observable JS or Sverto to build a visual that can respond to the scroll changes :)

[d-qn]

Hi James. Thank you for this detailed answer 🙏🏼 ! I was only aiming for the R chart/htmlwidget to be there as a sticky element, I wasn't even considering to animate it on scroll. In case you are planning to pursue your experiments, that would be awesome if you could show how to do stick such element with CSS. Might give it a try otherwise, but I can't really make sense of Scrolloma.js yet.

Thanks for the other resources. I saw the {rolldown} package, but because there hasn't been any activity for a while on that repo, I was wondering if your approach is somewhat better or more uptodate