Improve default style rolldown_default_style() at R/style.R:

• Centered and properly padded document title
• De-emphasized plot/image in sidebar (if using scrollama_sidebar()): grey scale/blur
• Slightly larger font size
• ...

Also may have a dark style variant.

I've been hoping for a scrollytelling implementation in R for a while so I'm immensely thankful for your work.

I'm wondering how output: rolldown::scrollama_sidebar will interact with a website built using the Distill for R Markdown package (which has its own output using similar syntax).

I'm aware this is experimental and likely has not been considered yet, just curious on your thoughts.

Plots/images in the first or the last section in scrollama_sidebar() layout cannot be displayed in the exhibit area, because they cannot be positioned across the center line and be activated.

Add invisible dummy sections in the layout before the first and after the last section, so that they can be pushed across the center line.

This pudding article outlines five additional js libraries for storytelling. They are Waypoints, ScrollStory, ScrollMagic, graph-scroll.js, and in-view.js

There is also an excellent Medium article that shows examples of both scroll- and step-based storytelling. We may want to implement the ability to step through sections in the future.

We can open up issues for the libraries we want to implement (after scrollama), but for now I will post any additional options as comments under this issue.

First install the package with remotes::install_github('uncoast-unconf/rolldown'). Here is a minimal example:

---
title: "Untitled"
output:
  rolldown::scrollama: 
    self_contained: no
---

```{css, echo=FALSE}
.level1 {
  min-height: 400px;
  border: 1px solid;
  margin-bottom: 4em;
  padding: 1em 2em 2em;
}
.is-active {
  background-color: yellow;
}
```

# Section One

## A subsection

Some text.

```{r}
plot(cars)
plot(pressure)
```

# Section Two

More text.

# Section Three

Even more text.

```{r}
rolldown::scrollama_config()
```

Hi there,

thanks for creating this package, I think it has a lot of potentials.

Issue:
Currently, I am trying to get a nice example up and running and was wondering how I can avoid, that my plots show up in both frames (sidebar & main column).

When I use the template = 'scrollama-sidebar' and look at the "Plots" section, 'The boring scatterplot' is shown in the sidebar as well as in the main column.
I would like to show the code in the sidebar and the plot on the main section. Any idea how I might achieve this?

Thanks in advance!

As other repo

This post by @JohnCoene looks very interesting: https://blog.john-coene.com/posts/2019-11-17-scrollytell/

And of course, this recent talk by @john-guerra is amazing: https://johnguerra.co/viz/influentials/story/?hashtag=useR2019

Perhaps the enter function could trigger an input change which invalidates the corresponding 'output'

Maybe I'm missing the point of rolldown, but sometimes I want to go back and forth with a 'slidelike' format in this. So I'd like to be able to type text (or bullets etc) and have it be displayed in the main section rather than only in the sidebar part. Is this possible in any way? Thanks!

I just tried rolldown and it is great! Thank you for your hardwork.

If I replace the plots in the sidebar example with a leaflet map, the map on the sidebar works fine. But the main map (in the right pane) has a weird behavior. If I click on the zoom buttons '+' or '-', the page moves to the top.

Also, is there a way to render everything (map/plot) in a way that it takes up the complete space in the right pane (just like the table in the first section takes up the complete width)?

Reproducible example

---
title: "Scrollama Document (Sidebar Layout)"
author: "Anonymous Llama"
date: "`r Sys.Date()`"
output: rolldown::scrollama_sidebar
---

```{css, echo=FALSE}
.level1 {
  min-height: 400px;
  border: 1px solid;
  margin-bottom: 4em;
  padding: 1em 2em 2em;
  opacity: .5;
}
.is-active {
  opacity: 1;
  background-color: lightyellow;
}
body {
  margin-bottom: 80vh;
}
```



# Introduction

## Level-two heading

Level-two and below headings...

### Level-three

...are all contained in the same section.

### A table

```{r, echo=FALSE}
knitr::kable(head(mtcars), caption = 'A boring table.')
```

And no chairs.

# Text

Example text.

No figures or tables in this section. Nothing to display in the main area.

# Plots

You may include any number of plots in a section.

```{r, fig.cap=c('A boring scatterplot.')}
library(leaflet)
leaflet() %>% 
  addProviderTiles(providers$Esri.WorldImagery) %>%
  setView(-83, 46, zoom = 6) 

```

# Images

Local news [reported](https://www.desmoinesregister.com/story/news/2018/04/27/rubber-duck-des-moines-yess-duck-derby/558852002/) a giant inflatable rubber duck rolling down the street of Des Moines, where this package is conceived.

![The Rolling Duck](https://user-images.githubusercontent.com/163582/60457872-c164ff00-9c02-11e9-8d0f-cdae566b75ed.jpeg)


# Videos

You can also embed videos here.

<iframe width="100%" height="100%" src="https://www.youtube.com/embed/7gYIs7uYbMo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

# Technical details

The current implementation of this sidebar layout is kind of cumbersome. The HTML template is `rolldown:::pkg_resource('html', 'scrollama-side.html')`. We have hard-coded some CSS and JavaScript code in this template, which means, for example, you cannot easily customize the initialization of Scrollama (if you really want to, you must provide your own HTML template). You should be free to customize CSS, though (like we did in the beginning of this example document).

Activating sections doesn't work well (especially in RStudio Viewer). We don't know why at the moment.   

I just tried rolldown and it looks very interesting! I was just wondering if it was possible to not show tables and graphics twice (in the sidebar section on the left and the main section on the right). Essentially, I would like to have only the text on the left and the media (tables, graphs, videos) on the right.

Is this possible?

Thank you so much for your help!
Best,
Jens

Hi,

I apologise for my poor coding skills but I do not know how to put Rmd code in Github...

I have tried to create a scollama_sidebar with a trelliscope plot on car dataset using the following RMD file in this zip folder
RollDownTest.zip

The good news is that it is able to knit the script.

The bad news I think the side bar is too small to see the diagram

Is there a way to increase the size of the sidebar ?

I want to brainstorm ideas about tomorrow afternoon's presentation. I have one idea: turn this thread uncoast-unconf/uu-2019-day-zero#11 to a storytelling (R Markdown) document and demo it in our talk. Wouldn't it be a perfect application of rolldown?!!