Stacking Scroller Components

Introduction to leveraging multiple Scrollers in Idyll

By: Megan Vo

Idyll's Scroller component is a useful way to incorporate more narrative structure into an article. As its name suggests, it provides a scroll-based presentation layout that can manipulate graphics upon each “step” that is entered.

This tutorial will focus on introducing multiple Scroller components in one Idyll document to further aid your scrollytelling needs. If you are not familiar with Idyll’s Scrollers, take a peek at this tutorial first. Otherwise, let’s get started!


What are Stacked Scrollers?

Instead of one Scroller component per document, stacking Scrollers simply translates to declaring multiple Scroller components one after another. This way, each Scroller can be thought of as its own section with steps that only it can control.


Why Stack?

Stacking allows us to easily transition between the different graphics of each component. Take for example, the smooth transitions between the graphics of the article below.

The D-I-Y Data of Fugazi by Matthew Conlen.

With stacking, the graphic of each Scroller slides up and replaces the previous one on the screen -- and quite easily too. Since each Scroller component only allows for one graphic, switching between them is a bit more difficult and clunky when using just one Scroller.

Perhaps one of the biggest perks is that stacking lets us include multiple animated graphics per document because each Scroller controls their own set of steps. This also gives us greater customizeability in terms of style and functionality since every Scroller has a corresponding id.


Let’s Build Something

To get acquainted with stacked scrolling, below is a short example of customizing each of the stacked Scroller components. For this example, we’ve made changes to the styles.css and index.idyll files. Also in the package.json file, we have switched to the layout: centered format.

The bar on the right belongs to this first Scroller component.

Let’s first look at how we can animate within a Scroller. Watch how it rotates as you move to the next step.

We’ve reached the next step! You can animate a graphic within a particular Scroller based on what step is entered.

To keep track of the current step you are in, you can assign a variable to the Scroller’s currentStep prop and tie it to your graphic:

[var name:"barStep" value:0 /]
[Scroller currentStep:barStep]
  [Graphic]
    [img src:"static/images/bar.svg" 
        className:`barStep === 0 ? "bar" : 
                "bar rotate" + barStep `/]
  [/Graphic]

  [Step]
    ...
  [/Step]
[/Scroller]

Now we can write some basic transformations in the style.css file to reflect the barStep prop updates:

.bar {
  margin-left: 42vw;
  background: transparent;  
  width: 25vw;
  height: 10vh;
  transition: 400ms linear all;
}

.rotate1 {
  transform: rotate(90deg);
}

.rotate2 {
  transform: rotate(210deg);
}

But let’s say you want to include another graphic. We could stay here on this Scroller but it would get a little messy...

So let’s stack!

Welcome to the second Scroller! Like the first Scroller, we have kept track of the step we’re on by passing a different variable to the currentStep prop: 

// Second Scroller
[var name:"circleStep" value:0/]
[Scroller currentStep:circleStep]
  ...
[/Scroller]

Now watch for a different animation as you enter the next step.

As mentioned previously, each Scroller has a unique id.

The id format is #idyll-scroll-[num] starting at 0. Since this is the second Scroller, its id is #idyll-scroll-1.

This comes in handy when you want to change the style for a particular Scroller only.

Here, we’ve changed this graphic’s background color in the style.css file: 

#idyll-scroll-1 .idyll-scroll-graphic {
  background: #5BAFC1;
}

And that’s pretty much it!

Go ahead and scroll down for the summary code snippets.


Snippets

If you want to use the code snippets directly, you can use the default bar and circle images as well.

// First Scroller
[var name:"barStep" value:0 /]
[Scroller currentStep:barStep]
  [Graphic]
    [img src:"static/images/bar.svg" 
        className:`barStep === 0 ? "bar" : 
                "bar rotate" + barStep `/]
  [/Graphic]

  [Step]
    ... // Step content here
  [/Step]

  [Step]
    ...
  [/Step]
[/Scroller]

// Second Scroller
[var name:"circleStep" value:0 /]
[Scroller currentStep:circleStep]
  [Graphic]
    [img src:"static/images/circle.svg" 
        className:`circleStep === 0 ? "circle" : 
                "circle enlarge" + circleStep `/]
  [/Graphic]

  [Step]
    ...
  [/Step]
  [Step]
    ..
  [/Step]
[/Scroller]
/* CSS for scroller portion */
.bar, .circle {
  margin-left: 42vw;
  background: transparent;
  transition: 400ms linear all;
}

/* Format the graphics */
.circle {
  height: 35vh;
}

.bar {
  width: 25vw;
  height: 10vh;
}

/* Animations */
.rotate1 {
  transform: rotate(90deg);
}

.rotate2 {
  transform: rotate(210deg);
}

.enlarge1 {
  transform: scale(2);
}

.enlarge2 {
  transform: scale(2.2);
}

/* Change graphic background based on Scroller id */
#idyll-scroll-0 .idyll-scroll-graphic {
  background:  #F0F0F0;
}

#idyll-scroll-1 .idyll-scroll-graphic {
  background: #5BAFC1;
}

Final Notes

Interested in exploring more? Idyll's Docs has information on all the built-in components including the Scroller. If you’re looking to get started somewhere, this page in the Docs will help you get set up.

Note that you can apply the same Scroller concepts from the CSS example above to control custom JavaScript components as well in Idyll. Check out the custom components page on how to incorporate those into your Idyll document.