Home

CH.Scrollycoding

Learn how to use the experimental CH.Scrollycoding component from Code Hike in your documentation to create interactive code blocks that change on scroll with corresponding text.

Step 1

Align text with side-by-side code blocks so that readers can see what changes as they scroll through the instructions.

app.js


const { lorem, ipsum } = dolor({
  sit: {
    amet: 1,
    consectetur: 2,
    adipiscing: (elit) => ({
      sed: elit,
    }),
    eiusmod: (tempor) => ({
      incididunt: tempor,
    }),
    ut: (labore) => ({
      et: labore,
      dolore: labore + 1,
    }),
    magna: (aliqua) => ({
      ut: aliqua,
    }),
    nostrud: (elit) => ({
      exercitation: elit,
      ullamco: elit,
    }),
    laboris: (elit) => ({
      nisi: elit,
    }),
  },
});

Step 2

For example, you can highlight a different part of the code.

app.js


const { lorem, ipsum } = dolor({
  sit: {
    amet: 1,
    consectetur: 2,
    adipiscing: (elit) => ({
      sed: elit,
    }),
    eiusmod: (tempor) => ({
      incididunt: tempor,
    }),
    ut: (labore) => ({
      et: labore,
      dolore: labore + 1,
    }),
    magna: (aliqua) => ({
      ut: aliqua,
    }),
    nostrud: (elit) => ({
      exercitation: elit,
      ullamco: elit,
    }),
    laboris: (elit) => ({
      nisi: elit,
    }),
  },
});

Step 3

Or you can add or remove code from the previous code block.

app.js


const { lorem, ipsum } = dolor({
  sit: {
    amet: 1,
    consectetur: 2,
    adipiscing: (elit) => ({
      sed: elit,
    }),
    eiusmod: (tempor) => ({
      incididunt: tempor,
    }),
    ut: (labore) => ({
      et: lorem(labore * ipsum),
      dolore: lorem(labore + 1),
    }),
    nostrud: (elit) => ({
      exercitation: elit,
      ullamco: elit,
    }),
    laboris: (elit) => ({
      nisi: elit,
    }),
  },
});

Step 1

Align text with side-by-side code blocks so that readers can see what changes as they scroll through the instructions.

Step 2

For example, you can highlight a different part of the code.

Step 3

Or you can add or remove code from the previous code block.

app.js


const { lorem, ipsum } = dolor({
  sit: {
    amet: 1,
    consectetur: 2,
    adipiscing: (elit) => ({
      sed: elit,
    }),
    eiusmod: (tempor) => ({
      incididunt: tempor,
    }),
    ut: (labore) => ({
      et: labore,
      dolore: labore + 1,
    }),
    magna: (aliqua) => ({
      ut: aliqua,
    }),
    nostrud: (elit) => ({
      exercitation: elit,
      ullamco: elit,
    }),
    laboris: (elit) => ({
      nisi: elit,
    }),
  },
});

This component is best viewed on larger screens, such as a desktop.

Overview

CH.Scrollycoding is used to show code and corresponding text side-by-side. The reader's scroll position will determine which part of the code is highlighted.

CH.Scrollycoding is currently still an experimental feature in Code Hike. Refer to Code Hike's website for more information.

Properties

Name	Type	Description
`lineNumbers`	boolean	Option to show line numbers for each row of code. The default is `false`.
`preset`	url	Option to link to a Code Sandbox project if you would like to include a preview with the code.
`rows`	integer or `focus`	Option to set a custom height for the code block based on either a specified number of rows or `focus` annotation.
`showCopyButton`	boolean	Option to show copy button on the code block. The default is `true`

Examples

To display code blocks as tabs or panels within CH.Scrollycoding, wrap code blocks in a CH.Code component. Refer to CH.Code for detailed instructions and examples.

Simple scrolling code

Step 1

Wrap all text and code blocks with the <CH.Scrollycoding> component. Separate sections with a divider (---) between each step. To focus on a specific piece of code for a section, add focus settings to the corresponding code block.

app.js


const { lorem, ipsum } = dolor({
  sit: {
    amet: 1,
    consectetur: 2,
    adipiscing: (elit) => ({
      sed: elit,
    }),
    eiusmod: (tempor) => ({
      incididunt: tempor,
    }),
    ut: (labore) => ({
      et: labore,
      dolore: labore + 1,
    }),
    magna: (aliqua) => ({
      ut: aliqua,
    }),
    nostrud: (elit) => ({
      exercitation: elit,
      ullamco: elit,
    }),
    laboris: (elit) => ({
      nisi: elit,
    }),
  },
});

Step 2

If you want to use the same code example from the previous step but highlight a different section, then place an empty code block with the same settings. Change the focus settings to the relevant lines of code to correspond with the current text.

app.js


const { lorem, ipsum } = dolor({
  sit: {
    amet: 1,
    consectetur: 2,
    adipiscing: (elit) => ({
      sed: elit,
    }),
    eiusmod: (tempor) => ({
      incididunt: tempor,
    }),
    ut: (labore) => ({
      et: labore,
      dolore: labore + 1,
    }),
    magna: (aliqua) => ({
      ut: aliqua,
    }),
    nostrud: (elit) => ({
      exercitation: elit,
      ullamco: elit,
    }),
    laboris: (elit) => ({
      nisi: elit,
    }),
  },
});

Step 3

To add or remove code from the previous code block, put the complete new code in the next code block. The differences between the two code blocks will be detected and animated automatically as the reader continues to scroll.

app.js


const { lorem, ipsum } = dolor({
  sit: {
    amet: 1,
    consectetur: 2,
    adipiscing: (elit) => ({
      sed: elit,
    }),
    eiusmod: (tempor) => ({
      incididunt: tempor,
    }),
    ut: (labore) => ({
      et: lorem(labore * ipsum),
      dolore: lorem(labore + 1),
    }),
    nostrud: (elit) => ({
      exercitation: elit,
      ullamco: elit,
    }),
    laboris: (elit) => ({
      nisi: elit,
    }),
  },
});

Step 1

Step 2

Step 3

app.js


const { lorem, ipsum } = dolor({
  sit: {
    amet: 1,
    consectetur: 2,
    adipiscing: (elit) => ({
      sed: elit,
    }),
    eiusmod: (tempor) => ({
      incididunt: tempor,
    }),
    ut: (labore) => ({
      et: labore,
      dolore: labore + 1,
    }),
    magna: (aliqua) => ({
      ut: aliqua,
    }),
    nostrud: (elit) => ({
      exercitation: elit,
      ullamco: elit,
    }),
    laboris: (elit) => ({
      nisi: elit,
    }),
  },
});

simple-scrolling-code.mdx


<CH.Scrollycoding>
#### Step 1
Wrap all text and code blocks with the `<CH.Scrollycoding>` component. Separate
sections with a divider (`---`) between each step. To focus on a specific piece
of code for a section, add focus settings to the corresponding code block.
```js app.js focus=3:10
const { lorem, ipsum } = dolor({
  sit: {
    amet: 1,
    consectetur: 2,
    adipiscing: (elit) => ({
      sed: elit,
    }),
    eiusmod: (tempor) => ({
      incididunt: tempor,
    }),
    ut: (labore) => ({
      et: labore,
      dolore: labore + 1,
    }),
    magna: (aliqua) => ({
      ut: aliqua,
    }),
    nostrud: (elit) => ({
      exercitation: elit,
      ullamco: elit,
    }),
    laboris: (elit) => ({
      nisi: elit,
    }),
  },
});
```
---
#### Step 2
If you want to use the same code example from the previous step but highlight a
different section, then place an empty code block with the same settings. Change
the focus settings to the relevant lines of code to correspond with the current
text.
```js app.js focus=11:17
```
---
#### Step 3
To add or remove code from the previous code block, put the complete new code in
the next code block. The differences between the two code blocks will be
detected and animated automatically as the reader continues to scroll.
```js app.js focus=11:14
const { lorem, ipsum } = dolor({
  sit: {
    amet: 1,
    consectetur: 2,
    adipiscing: (elit) => ({
      sed: elit,
    }),
    eiusmod: (tempor) => ({
      incididunt: tempor,
    }),
    ut: (labore) => ({
      et: lorem(labore * ipsum),
      dolore: lorem(labore + 1),
    }),
    nostrud: (elit) => ({
      exercitation: elit,
      ullamco: elit,
    }),
    laboris: (elit) => ({
      nisi: elit,
    }),
  },
});
```
</CH.Scrollycoding>

Scrolling code with preview

Step 1

Set the preset property as a link to a Code Sandbox project. For any corresponding code blocks that will be used as examples, change the code block title to the relative path of the file that the code block will reference. In this example, we are changing code in the src/App.js file.

src/App.js


import { motion } from "framer-motion";
export default function App() {
  const bg = "hsl(20, 100%, 50%)";
  return (
    <motion.div
      className="swatch"
      animate={{ backgroundColor: bg }}
      transition={{ duration: 1 }}
    />
  );
}

Step 2

As the reader scrolls, the code will change to match the section in view. If the path to the file is not included as the code block title, the preview will not update.

src/App.js


import { motion } from "framer-motion";
export default function App() {
  const bg = "hsl(110, 100%, 50%)";
  return (
    <motion.div
      className="swatch"
      animate={{ backgroundColor: bg }}
      transition={{ duration: 1 }}
    />
  );
}

Step 3

Any changes to the code from the previous section will be animated automatically. As you scroll, you can see the color change in both the code and the preview.

src/App.js


import { motion } from "framer-motion";
export default function App() {
  const bg = "hsl(200, 100%, 50%)";
  return (
    <motion.div
      className="swatch"
      animate={{ backgroundColor: bg }}
      transition={{ duration: 1 }}
    />
  );
}

Step 4

Lines to focus on can also be specified in the fenced code block, just like any other Code Hike component. This helps highlight the most important parts of the code to the reader, even if they are not being altered.

src/App.js


import { motion } from "framer-motion";
export default function App() {
  const bg = "hsl(290, 100%, 50%)";
  return (
    <motion.div
      className="swatch"
      animate={{ backgroundColor: bg }}
      transition={{ duration: 1 }}
    />
  );
}

Step 1

Step 2

As the reader scrolls, the code will change to match the section in view. If the path to the file is not included as the code block title, the preview will not update.

Step 3

Any changes to the code from the previous section will be animated automatically. As you scroll, you can see the color change in both the code and the preview.

Step 4

src/App.js


import { motion } from "framer-motion";
export default function App() {
  const bg = "hsl(20, 100%, 50%)";
  return (
    <motion.div
      className="swatch"
      animate={{ backgroundColor: bg }}
      transition={{ duration: 1 }}
    />
  );
}

scrolling-code-with-preview.mdx


<CH.Scrollycoding preset="https://codesandbox.io/s/w5wfe">
#### Step 1
Set the `preset` property as a link to a Code Sandbox project. For any
corresponding code blocks that will be used as examples, change the code block
title to the relative path of the file that the code block will reference. In
this example, we are changing code in the `src/App.js` file.
```jsx src/App.js
import { motion } from "framer-motion";
export default function App() {
  const bg = "hsl(20, 100%, 50%)";
  return (
    <motion.div
      className="swatch"
      animate={{ backgroundColor: bg }}
      transition={{ duration: 1 }}
    />
  );
}
```
---
#### Step 2
As the reader scrolls, the code will change to match the section in view. If the
path to the file is not included as the code block title, the preview will not
update.
```jsx src/App.js focus=1,4,6:10
import { motion } from "framer-motion";
export default function App() {
  const bg = "hsl(110, 100%, 50%)";
  return (
    <motion.div
      className="swatch"
      animate={{ backgroundColor: bg }}
      transition={{ duration: 1 }}
    />
  );
}
```
---
#### Step 3
Any changes to the code from the previous section will be animated
automatically. As you scroll, you can see the color change in both the code and
the preview.
```jsx src/App.js focus=1,4,6:10
import { motion } from "framer-motion";
export default function App() {
  const bg = "hsl(200, 100%, 50%)";
  return (
    <motion.div
      className="swatch"
      animate={{ backgroundColor: bg }}
      transition={{ duration: 1 }}
    />
  );
}
```
---
#### Step 4
Lines to focus on can also be specified in the fenced code block, just like any
other Code Hike component. This helps highlight the most important parts of the
code to the reader, even if they are not being altered.
```jsx src/App.js focus=1,4,6:10
import { motion } from "framer-motion";
export default function App() {
  const bg = "hsl(290, 100%, 50%)";
  return (
    <motion.div
      className="swatch"
      animate={{ backgroundColor: bg }}
      transition={{ duration: 1 }}
    />
  );
}
```
</CH.Scrollycoding>

Illuminate Documentation

Step 1

Step 2

Step 3

Step 1

Step 2

Step 3

Overview

Properties

Examples

Simple scrolling code

Step 1

Step 2

Step 3

Step 1

Step 2

Step 3

Scrolling code with preview

Step 1

Step 2

Step 3

Step 4

Step 1

Step 2

Step 3

Step 4