Vue component to easily setup scroll-driven interactions (aka scrollytelling)

Overview

Vue Scrollama

Vue logo scrollama.js

A Vue component to easily setup scroll-driven interactions (aka scrollytelling). Uses Scrollama under the hood.

The best way to understand what it can do for you is to check out the examples here and here.

If you're upgrading from v1 to v2 (which you should), do check out the release notes.

Installation

npm install vue-scrollama intersection-observer

Scrollama makes use of IntersectionObserver and you'll want to manually add its polyfill intersection-observer for cross-browser support.

Basic Usage

Any elements placed directly inside a Scrollama component will be considered as steps. As the user scrolls, events will be triggered and emitted which you can handle as required:

  • step-enter: when the top or bottom edge of a step element enters the offset threshold
  • step-exit: when the top or bottom edge of a step element exits the offset threshold
  • step-progress: continually fires the progress (0-1) a step has made through the threshold

Here's a simple example with three <div> elements as steps and a step-enter event

<template>
  <Scrollama @step-enter="stepEnterHandler">
    <div class="step-1" data-step="a">...</div> // classes like .step-1 may be used to adjust the style and dimensions of a step
    <div class="step-2" data-step="b">...</div> // data-* attributes can be helpful to store instructions to be used in handlers
    <div class="step-3" data-step="c">...</div>
  </Scrollama>
</template>

<script>
import 'intersection-observer' // for cross-browser support
import Scrollama from 'vue-scrollama' // local registration in this example, can also be globally registered

export default {
  components: {
    Scrollama // local registration in this example, can also be globally registered 
  },
  methods: {
    stepEnterHandler ({element, index, direction}) {
      // handle the step-event as required here
      console.log({ element, index, direction });
      // use the data attributes if needed
      console.log(element.dataset.step) // a, b or c 
    }
  }
}
</script>

API Reference

Props

Props passed to the Scrollama component will simply be passed on to scrollama's setup method:

// example with offset prop set to 0.8
<template>
  <Scrollama @step-enter="stepHandler" :offset="0.8">
      ...
  </Scrollama>
</template>

Events

  • step-enter
  • step-exit
  • step-progress

Examples

Codesandbox

Note: The triggering might not work precisely in the split window browser in CodeSandbox. Open in a new window for more precise triggering.

and more.

Nuxt

Example repo here.

Release Notes

v2.0

  • Fixes buggy behaviour and improves performance on mobile devices
  • Updated in accordance with the latest scrollama API
  • Breaking: No more graphic slot, create your graphic outside the Scrollama component now and style it as per your needs (have a look at the examples above for guidance)
  • DOM scaffolding generated by Scrollama has been simplified
  • No need to import CSS any more, the DOM scaffolding is just one div and can be styled by adding classes or styles on the Scrollama component
Issues
  • Support SSR

    Support SSR

    Importing vue-scrollama gives window not defined when in SSR.

    opened by cco3 7
  • Is there a v-for example looping an array of objects?

    Is there a v-for example looping an array of objects?

    I can't seem to get this to work with a array of ojects "feedPosts" or even feedPosts.length which would equals 2. My {{val}} loops and displays object fine. But I get a error ** scrollama error: no step elements.** It will not call handler function. Any Ideas Thanks https://codesandbox.io/s/4270xl6oz0 is the snippet I was using

    Update So I can get a static array of objects to work. I can't get a ajax loaded arrray of objects to work

    <Scrollama :debug="true" :offset="0.8" @step-enter="handler">
          <div
            class="step"
            v-for="(val, n) in feedPosts"
            :key="n"
            offset="0.5"
            :data-step-no="n"
          >
            step {{ n }} {{val}}
          </div>
        </Scrollama>
    
    opened by travbus 2
  • Is it possible to update scrollama dynamically

    Is it possible to update scrollama dynamically

    I"m trying to use scrollama to make a dynamic infinite scoll list by tracking the index in the handler. Problem is when I update my looped array feedPosts, scrollama only works with the initial array of objects. So to get around that I rerendered scrollama by updating :key="componentKey" to + 1 after array is updated it rerenders scrollama and new data is working with it. Unfortunately it also resets the scroll to the top and the scrolloma flashes in the process.

    The question is it possible to update scrollama dynamically without rerender? Thanks!!

    ` <Scrollama :debug="true" :offset="0.8" v-if="feedPosts.length" @step-enter="handleScroll" :once="true" class="container" :key="componentKey" > `

    opened by travbus 2
  • @step-enter only firing once by default

    @step-enter only firing once by default

    <Scrollama :debug="true" @step-enter="stepEnterHandler"> <div v-for="index in 10" class="step" :key="'index"></div> </Scrollama>

    stepEnterHandler only fires on first activation, and only from direction down, even if I specifically state once="false"

    using version 1.1.1

    opened by jayden2 2
  • Bump websocket-extensions from 0.1.3 to 0.1.4 in /demo

    Bump websocket-extensions from 0.1.3 to 0.1.4 in /demo

    Bumps websocket-extensions from 0.1.3 to 0.1.4.

    Changelog

    Sourced from websocket-extensions's changelog.

    0.1.4 / 2020-06-02

    • Remove a ReDoS vulnerability in the header parser (CVE-2020-7662, reported by Robert McLaughlin)
    • Change license from MIT to Apache 2.0
    Commits
    • 8efd0cd Bump version to 0.1.4
    • 3dad4ad Remove ReDoS vulnerability in the Sec-WebSocket-Extensions header parser
    • 4a76c75 Add Node versions 13 and 14 on Travis
    • 44a677a Formatting change: {...} should have spaces inside the braces
    • f6c50ab Let npm reformat package.json
    • 2d211f3 Change markdown formatting of docs.
    • 0b62083 Update Travis target versions.
    • 729a465 Switch license to Apache 2.0.
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump ssri from 6.0.1 to 6.0.2 in /demo

    Bump ssri from 6.0.1 to 6.0.2 in /demo

    ⚠️ Dependabot is rebasing this PR ⚠️

    If you make any changes to it yourself then they will take precedence over the rebase.


    Bumps ssri from 6.0.1 to 6.0.2.

    Changelog

    Sourced from ssri's changelog.

    6.0.2 (2021-04-07)

    Bug Fixes

    • backport regex change from 8.0.1 (b30dfdb), closes #19

    Commits
    Maintainer changes

    This version was pushed to npm by nlf, a new releaser for ssri since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump y18n from 3.2.1 to 3.2.2 in /demo

    Bump y18n from 3.2.1 to 3.2.2 in /demo

    ⚠️ Dependabot is rebasing this PR ⚠️

    If you make any changes to it yourself then they will take precedence over the rebase.


    Bumps y18n from 3.2.1 to 3.2.2.

    Commits
    Maintainer changes

    This version was pushed to npm by oss-bot, a new releaser for y18n since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump elliptic from 6.5.1 to 6.5.4 in /demo

    Bump elliptic from 6.5.1 to 6.5.4 in /demo

    ⚠️ Dependabot is rebasing this PR ⚠️

    If you make any changes to it yourself then they will take precedence over the rebase.


    Bumps elliptic from 6.5.1 to 6.5.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump pug-code-gen from 2.0.2 to 2.0.3

    Bump pug-code-gen from 2.0.2 to 2.0.3

    Bumps pug-code-gen from 2.0.2 to 2.0.3.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump highlight.js from 9.15.10 to 9.18.5 in /demo

    Bump highlight.js from 9.15.10 to 9.18.5 in /demo

    Bumps highlight.js from 9.15.10 to 9.18.5.

    Release notes

    Sourced from highlight.js's releases.

    10.3.2 - Oops, "Javascript".

    Tiny tiny release, just to fix the website incorrectly not listing Javascript in the list of languages you could choose for a custom build. NPM and CDN build should not have been affected so 10.3.1 is effectively the same as 10.3.2 for those builds.

    If you made a custom build from the website with 10.3 or 10.3.1 you may want to check and make sure it includes Javascript, and if not, build it again.

    9.18.1 - Brrrrr, it’s freezing.

    Quick release to resolve #2375

    Changelog

    Sourced from highlight.js's changelog.

    Release v9.18.5

    Version 9 has reached end-of-support and will not receive future updates or fixes.

    Please see VERSION_10_UPGRADE.md and perhaps SECURITY.md.

    • enh: Post-install script can be disabled with HLJS_HIDE_UPGRADE_WARNING=yes
    • fix: Deprecation notice logged at library startup a console.log vs console.warn.
      • Notice only shown if actually highlighting code, not just requiring the library.
      • Node.js treats warn the same as error and that was problematic.
      • You (or perhaps your indirect dependency) may disable the notice with the hideUpgradeWarningAcceptNoSupportOrSecurityUpdates option
      • You can also set HLJS_HIDE_UPGRADE_WARNING=yes in your envionment to disable the warning

    Example:

    hljs.configure({
      hideUpgradeWarningAcceptNoSupportOrSecurityUpdates: true
    })
    

    Reference: highlightjs/highlight.js#2877

    Release v9.18.4

    Version 9 has reached end-of-support and will not receive future updates or fixes.

    Please see VERSION_10_UPGRADE.md and perhaps SECURITY.md.

    • fix(livescript) fix potential catastrophic backtracking (#2852) [commit]

    Version 9.18.3

    • fix(parser) Freezing issue with illegal 0 width illegals (#2524)
      • backported from v10.x

    Version 9.18.2

    Fixes:

    • fix(night) Prevent object prototype values from being returned by getLanguage (#2636) night

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Vue3 comptible

    Vue3 comptible

    Vue 3 has been in the party for quite a long time now. Is there a plan to migrate it to Vue 3 composition API?

    opened by markusand 0
  • Trigging doesn't work properly on mobile Chrome

    Trigging doesn't work properly on mobile Chrome

    It seems that on mobile Chrome trigging occurs much above the intersection of a dotted line for debugging and the top edge of a slide container when the direction is down. It happens in my own example and it happens with your example given. I mean this one https://vue-scrollama.now.sh/#/stickygraphic1 The behavior is ok on other mobile browsers and on any desktop browser including Chrome. Tesded on several phones from different manufacturers — the same. Has anybody experieced the same issue and has found a solution? The video with screencast is attached video_2020-06-09_13-47-48.zip

    opened by anton9ov 2
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 167 Oct 12, 2021
Vue component to easily setup scroll-driven interactions (aka scrollytelling)

Vue Scrollama A Vue component to easily setup scroll-driven interactions (aka scrollytelling). Uses Scrollama under the hood. The best way to understa

Vignesh Shenoy 351 Oct 13, 2021
Vue3.0 无缝滚动组件

vue3-seamless-scroll Vue3.0 无缝滚动组件 目前组件支持上下左右无缝滚动,单步滚动,并且支持复杂图标的无缝滚动,组件支持原生 css3动画 滚动,目前组件支持平台与Vue3.0支持平台一致。 效果展示 安装 npm npm install vue3-seamless-scr

null 15 Oct 7, 2021
Handy floating scrollbar component for Vue 3

vue-handy-scroll Handy floating scrollbar component for Vue 3. Synopsis vue-handy-scroll is a component that solves the problem of scrolling lengthy c

null 6 Oct 2, 2021
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 169 Oct 14, 2021
Component that customizes the scroll and inserts shadow when scrolling exists

Vue Scroll Shadow • • Component that customizes the scroll and inserts shadow when scrolling exists Installation NPM npm i vue-scroll-shadow # or yarn

André Lins 2 Oct 1, 2021
A super simple Vue component that allows fullscreen and horizontal scroll snapping.

Vue Scroll Snap A super simple Vue component that allows both fullscreen and horizontal scroll snapping. Showcase Check out the live demo to see the s

Angelo 26 Oct 12, 2021
Customize the scrolling position on route navigation. Especially hash mode.

vue-scroll-behavior Customize the scrolling position on route navigation IE / Edge Firefox Chrome Safari Opera iOS Android IE9+, Edge ✓ ✓ ✓ ✓ ✓ ✓ Tabl

Yazhe Wang 136 Jul 13, 2021
A scroll loading component for vue.js.

vue-scroll-loader 简体中文 A scroll loading component for vue.js. View demo Browsers Already use IntersectionObserver polyfill compatible with mainstream

John Wu 57 Sep 30, 2021
🎉 Page scroll progress bar component for @vuejs

vue-scroll-progress ?? Simple Vue.js plugin for page scroll progress bar Live Demo Installation npm i vue-scroll-progress --save yarn add vue-scroll-p

Hyouk Seo 90 Oct 12, 2021
Scrollspy for Vue2

vue2-scrollspy Scrollspy, and animated scroll-to, for Vue2, inspired by vue-scrollspy. See https://ibufu.github.io/vue2-scrollspy/ or Jsfiddle. Instal

morning 130 Sep 1, 2021
A Vue component that syncronize containers scroll positions

vue-scroll-sync A Vue component that syncronize containers scroll positions Installation npm i --save vue-scroll-sync Browser Include the script file,

null 20 Sep 30, 2021
A Vue.js component to top of the page

vue-scroll-up Installation Get from npm / yarn: npm i vue-scroll-up yarn add vue-scroll-up or just include vue-scroll-up.js to your view like <script

Willy Hong 5 Sep 22, 2021
Vue.js plugin for page scroll progress bar

vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

Guillaume Briday 81 Oct 12, 2021
Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.

navscroll-js Installation This package is available on npm. Using npm: npm install --save navscroll Using yarn: yarn add navscroll Directly include it

Honoré Nintunze 52 Aug 12, 2021
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 494 Oct 12, 2021
A tiny Vue directive that stop propagation scroll when edge reached

vue-scroll-stop A tiny Vue directive that stop propagation scroll when edge reached. Works with desktop mousewheel and mobile touchmove events ✅ On ❌

Volodymyr Antoniuk 42 Aug 2, 2021
A vue2 component based on Iscroll

vue-virtual-infinite-scroll a vue2 component based on Iscroll, supports big data list with high performance scroll, infinite load and pull refresh. Ba

Lei Zuo 45 Mar 4, 2021
Vue.js plugin for page scroll progress bar

vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

Guillaume Briday 81 Oct 12, 2021