@st-graphics/scrolly

Opensource scrollytelling components used by Straits Times Interactive Graphics Team

Modern

Uses `position: sticky`. No unsightly jerk when sticky content "snap" into position. Fallbacks to `position: fixed` in older browsers.

Declarative

Experiment with different scrollytelling formats effortlessly using our simple declarative API.

Flexible

Uses `slots` and `render props` giving user the flexibility to include any content and implement transition in different ways.

# Installing

npm install @st-graphics/scrolly

npm install @st-graphics/react-scrolly

# Usage

# With Vue

<template>
  <st-scrolly>
    <template v-slot:background="{slideIndex}"><!-- your sticky content--></template>
    <!-- your slides content -->
  </st-scrolly>
</tempate>

<script>
import '@st-graphics/scrolly/dist/bundle.css'
import StScrolly from '@st-graphics/scrolly'

export default {
  components: {StScrolly}
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# With React

import '@st-graphics/react-scrolly/dist/bundle.css'
import StScrolly from '@st-graphics/react-scrolly'

export function (props) {
  const renderBackground = ({slideIndex}) => (
    <!-- your sticky content -->
  )
  return (
    <StScrolly renderBackground={renderBackground}>
      <!-- your slides content-->
    </StScrolly>
  )
}

1
2
3
4
5
6
7
8
9
10
11
12
13