# Scrollytelling with observable

**URL:** https://talk.observablehq.com/t/scrollytelling-with-observable/9630
**Category:** Show and tell
**Created:** [August 9, 2024, 1:21pm UTC](https://talk.observablehq.com/t/scrollytelling-with-observable/9630 "2024-08-09T13:21:41Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![fsemecurbe](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fsemecurbe/32/8595_2.png) [@fsemecurbe](https://talk.observablehq.com/u/fsemecurbe)
#### Post date: [August 9, 2024, 1:21pm UTC](https://talk.observablehq.com/t/scrollytelling-with-observable/9630/1 "2024-08-09T13:21:41Z")

</div>

I try to extend the scrollytelling observable framework example with markdownit. For this purpose, I create two new balises : the first to enter the scrolling (::: scroll-container) and the second to describe a step (~~~ scroll-section figure\_name).

The figures are stored inside a dictionary. To display a figure in a scroll section, you just need to add the correct key (figure\_name) from the dictionary.

The exemple is here : [Examples of scrolling with observablehq framework | Scrollytelling](https://francoissemecurbe.observablehq.cloud/scrollytellingwithobservableframework/)

and the index.md here : [scrollytelling\_observablehq/scrollytelling/src/index.md at 41dee7853b754519255afb734c9f0b21e4d9a7f3 · fsemecurbe/scrollytelling\_observablehq · GitHub](https://github.com/fsemecurbe/scrollytelling_observablehq/blob/41dee7853b754519255afb734c9f0b21e4d9a7f3/scrollytelling/src/index.md)

What do you think about that ?

Thanks you for your advices.