### Start Development Server

Source: https://github.com/basementstudio/scrollytelling/blob/main/website/README.md

Starts the development server and enables hot-reloading. This command watches for changes in the codebase and automatically updates the application.

```bash
yarn dev
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/basementstudio/scrollytelling/blob/main/website/README.md

Installs all the necessary project dependencies using Yarn. This command reads the 'package.json' file to fetch and link required libraries.

```bash
yarn
```

--------------------------------

### Scrollytelling Simple Tweening Example

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/quick-start/examples.mdx

A StackBlitz example demonstrating simple tweening animations using the scrollytelling library. This is useful for understanding basic animation control.

```react
https://stackblitz.com/edit/react-ts-8rqm8k?file=App.tsx
```

--------------------------------

### Scrollytelling with Lenis Smooth Scroll Example

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/quick-start/examples.mdx

A StackBlitz example showing how to integrate the scrollytelling library with Lenis Smooth Scroll for enhanced scrolling experiences. This demonstrates smooth scrolling capabilities.

```react
https://stackblitz.com/edit/react-ts-uuwfed?file=App.tsx
```

--------------------------------

### Scrollytelling Layered Pinning Example

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/quick-start/examples.mdx

A StackBlitz example illustrating layered pinning techniques with the scrollytelling library. This is helpful for creating complex visual sequences based on scroll position.

```react
https://stackblitz.com/edit/react-ts-4dtlww?file=App.tsx
```

--------------------------------

### Run Documentation Locally

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/README.md

This command starts the local development server for the project's documentation. It allows for live previewing of changes as you make them.

```bash
yarn dev
```

--------------------------------

### Install Yarn

Source: https://github.com/basementstudio/scrollytelling/blob/main/website/README.md

Installs Yarn globally using npm. Yarn is a package manager that will be used for managing project dependencies.

```bash
npm install -g yarn
```

--------------------------------

### Scrollytelling Horizontal Scroll Example

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/quick-start/examples.mdx

A StackBlitz example demonstrating horizontal scrolling implementation using the scrollytelling library. This is useful for creating unique navigation and content layouts.

```javascript
https://stackblitz.com/edit/stackblitz-starters-fx6y3a
```

--------------------------------

### Configure and Run Website Development

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/README.md

Instructions for setting up and running the development version of the project's website. This involves configuring environment variables and then starting the development server.

```bash
# Navigate to the website directory
cd /website

# Set environment variables for URLs
# export SITE_URL="your_site_url"

# Run the website development server
yarn dev
```

--------------------------------

### Install Scrollytelling with yarn

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/quick-start/installation.mdx

Installs the @bsmnt/scrollytelling package and its peer dependency GSAP using yarn.

```bash
yarn add @bsmnt/scrollytelling gsap
```

--------------------------------

### Scrollytelling Three.js Tube Example

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/quick-start/examples.mdx

A CodeSandbox example featuring the scrollytelling library integrated with Three.js to create a 3D tube visualization. This showcases 3D graphics capabilities.

```javascript
https://codesandbox.io/s/978cns?file=/src/App.js
```

--------------------------------

### Install Scrollytelling with npm

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/quick-start/installation.mdx

Installs the @bsmnt/scrollytelling package and its peer dependency GSAP using npm.

```powershell
npm i @bsmnt/scrollytelling gsap
```

--------------------------------

### Scrollytelling Library Demo

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/quick-start/examples.mdx

A live demo showcasing the scrollytelling library in action within a real-world scenario. This provides a practical understanding of the library's functionality.

```react
https://scrollytelling.basement.studio/
```

--------------------------------

### Install Scrollytelling with pnpm

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/quick-start/installation.mdx

Installs the @bsmnt/scrollytelling package and its peer dependency GSAP using pnpm.

```zsh
pnpm add @bsmnt/scrollytelling gsap
```

--------------------------------

### Scrollytelling Usage Example

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/api-reference/root.mdx

Demonstrates how to use the Scrollytelling.Root and Scrollytelling.Animation components to create a scroll-triggered animation.

```jsx
import * as Scrollytelling from "@bsmnt/scrollytelling";

export const Footer = () => (
  <Scrollytelling.Root start="top 80%" debug={{ label: "Footer" }}>
    <footer className={s.footer}>
      <div className={s["container"]}>
        <Scrollytelling.Animation
          tween={{
            start: 60,
            end: 100,
            from: {
              y: "-120%",
              position: "absolute",
              x: isDesktopSm ? "-8vw" : toVw(-20),
              scale: 0.6,
            },
          }}>
          <a href={ghHref} target="_blank" rel="noreferrer">
            <Image className={s.QR} src={QRImg} alt="QR" />
          </a>
        </Scrollytelling.Animation>
      </div>
    </footer>
  </Scrollytelling.Root>
);
```

--------------------------------

### Scrollytelling Library Source Code

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/quick-start/examples.mdx

The source code for the scrollytelling library's website, allowing users to inspect the implementation details and how the library is used.

```markdown
https://github.com/basementstudio/scrollytelling/blob/main/website/README.md
```

--------------------------------

### Scrollytelling Pin Component Usage Example

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/api-reference/pin.mdx

Example of how to use the Scrollytelling Pin component within a Root component to pin content.

```jsx
import * as Scrollytelling from "@bsmnt/scrollytelling";

export const HomePage = () => (
  <Scrollytelling.Root>
    <Scrollytelling.Pin childHeight={0} pinSpacerHeight={"100vh"} top={0}>
      <section className="section">
        <div className="wrapper">
          <h1>Layered pinning 1</h1>
        </div>
      </section>
    </Scrollytelling.Pin>
  </Scrollytelling.Root>
);
```

--------------------------------

### Install BSMNT Scrollytelling and GSAP

Source: https://github.com/basementstudio/scrollytelling/blob/main/README.md

Installs the necessary packages for BSMNT Scrollytelling and its peer dependency, GSAP, using Yarn.

```zsh
yarn add @bsmnt/scrollytelling gsap
```

--------------------------------

### Root Component Start and End Values

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/quick-start/troubleshooting.mdx

This section explains common issues with the `start` and `end` values in the `Root` component for scrollytelling animations. It highlights how element height and viewport interactions can lead to zero-duration animations and provides solutions for adjusting these values.

```APIDOC
Root Component Configuration:

Purpose: Defines the scroll-driven animation's trigger points and duration.

Key Properties:
- start: Specifies when the animation should begin relative to the scroller and target element. Common values include:
  - `"start start"`: Animation starts when the scroller's start aligns with the target's start.
  - `"bottom start"`: Animation starts when the scroller's bottom aligns with the target's start.
- end: Specifies when the animation should end relative to the scroller and target element. Common values include:
  - `"bottom bottom"`: Animation ends when the scroller's bottom aligns with the target's bottom.
  - `"bottom start"`: Animation ends when the scroller's bottom aligns with the target's start.

Common Issue:
- Zero-duration animation: Occurs when the height of the element wrapped by `Root` is insufficient, or when `start` and `end` values are configured such that the scroll range is minimal or zero.

Solutions:
1. Increase the height of the element wrapped by `Root`.
2. Adjust the `end` value to create a larger scroll range, e.g., change `"bottom bottom"` to `"bottom start"`.
```

--------------------------------

### Core Components and Usage

Source: https://github.com/basementstudio/scrollytelling/blob/main/README.md

Demonstrates the core components of BSMNT Scrollytelling: Root for timeline and scrollTrigger setup, Animation for appending animations, Waypoint for specific scroll points, and RegisterGsapPlugins for custom plugins. It also includes helpers like Parallax and ImageSequenceCanvas, and context consumers like useScrollytelling and useScrollToLabel.

```javascript
import { Root, Animation, Waypoint, RegisterGsapPlugins, Parallax, ImageSequenceCanvas, useScrollytelling, useScrollToLabel } from '@bsmnt/scrollytelling';

// Example usage:
<Root>
  <Animation tween={...} />
  <Waypoint label="myLabel" />
  <Parallax speed={0.5} />
  <ImageSequenceCanvas images={...} />
</Root>

// Using context:
const { timeline } = useScrollytelling();
useScrollToLabel('myLabel');
```

--------------------------------

### Scrollytelling Waypoint Usage Example

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/api-reference/waypoint.mdx

Demonstrates how to use the Waypoint component within a Scrollytelling Root to trigger animations and function calls based on scroll position.

```tsx
import * as Scrollytelling from "@bsmnt/scrollytelling";

export const HomePage = () => (
  <Scrollytelling.Root>
    <div id="fun-div">
      <Scrollytelling.Waypoint at={50} onCall={triggerConfetti} />
      <Scrollytelling.Waypoint
        at={75}
        tween={{
          target: ["#fun-div"],
          to: { background: "black", color: "white" },
          duration: 0.35,
        }}
      />
    </div>
  </Scrollytelling.Root>
);
```

--------------------------------

### Troubleshooting Scroll Animation Issues

Source: https://github.com/basementstudio/scrollytelling/blob/main/README.md

Provides guidance on resolving common issues where scroll animations might not be functioning as expected, focusing on the 'start' and 'end' values of the Root component and element height.

```javascript
// Troubleshooting common issues with Root component's start and end values:
// Ensure the element wrapped by Root has sufficient height.
// Adjust 'end' value, e.g., 'bottom start', if duration is 0.
```

--------------------------------

### GSAP Tween Definition

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/quick-start/core-concepts.mdx

Explains the concept of a GSAP Tween, which handles animation work by setting properties on target objects over a duration. This library adapts the tween concept for scroll-based animations using 'start' and 'end' props.

```text
A Tween is what does all the animation work - think of it like a high-performance property setter. You feed in targets (the objects you want to animate), a duration, and any properties you want to animate and when its playhead moves to a new position, it figures out what the property values should be at that point applies them accordingly.
```

--------------------------------

### Parallax Component Usage

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/api-reference/parallax.mdx

Demonstrates how to use the Parallax component within a Scrollytelling Root. It configures the parallax effect with start and end points, and specifies vertical movement. This component is designed to animate its children based on scroll progress.

```jsx
import * as Scrollytelling from "@bsmnt/scrollytelling";

export const HomePage = () => (
  <Scrollytelling.Root>
    <Scrollytelling.Parallax
      tween={{
        start: 0,
        end: 100,
        movementY: { value: 40, unit: "px" },
      }}
    >
      <p>This text will move on scroll</p>
    </Scrollytelling.Parallax>
  </Scrollytelling.Root>
);
```

--------------------------------

### Pin Component API Documentation

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/api-reference/pin.mdx

API documentation for the Scrollytelling Pin component, detailing its props, types, default values, and descriptions.

```APIDOC
Pin Component:
  Enables pinning an element in its initial position while the remaining content scrolls.

  Props:
    tween: string | number
      Height of the pinned element in the pin.
    pinSpacerHeight: string | number
      Height of the spacer reserved for the pinned element in the pin.
    childClassName: string (Optional)
      Custom CSS class name for the child element.
    children: React.ReactNode (Optional)
      Content to be rendered inside the pinned element.
    pinSpacerClassName: string (Optional)
      Custom CSS class name for the pin spacer element.
    top: string | number (Optional, Default: "0")
      Custom top position for the pinned element.
```

--------------------------------

### API Reference

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/core-concepts.md

Provides detailed documentation for the scrollytelling API, including available endpoints, methods, parameters, and return values.

```APIDOC
API Reference:

This document outlines the available API endpoints and their functionalities for the scrollytelling project.

Base URL: /api/v1

Endpoints:

1. /stories
   - GET: Retrieve a list of all available stories.
     - Returns: An array of story objects, each containing an ID and title.
   - POST: Create a new story.
     - Request Body:
       - title: (string, required) The title of the new story.
     - Returns: The newly created story object with its ID.

2. /stories/{storyId}
   - GET: Retrieve a specific story by its ID.
     - Parameters:
       - storyId: (string, required) The unique identifier of the story.
     - Returns: The story object, including its content and configuration.
   - PUT: Update an existing story.
     - Parameters:
       - storyId: (string, required) The unique identifier of the story to update.
     - Request Body:
       - content: (object, optional) The content of the story.
       - configuration: (object, optional) The configuration settings for the story.
     - Returns: The updated story object.
   - DELETE: Delete a story by its ID.
     - Parameters:
       - storyId: (string, required) The unique identifier of the story to delete.
     - Returns: A success message or status code.

3. /stories/{storyId}/elements
   - GET: Retrieve all scrollytelling elements for a specific story.
     - Parameters:
       - storyId: (string, required) The unique identifier of the story.
     - Returns: An array of element objects associated with the story.
   - POST: Add a new scrollytelling element to a story.
     - Parameters:
       - storyId: (string, required) The unique identifier of the story.
     - Request Body:
       - type: (string, required) The type of the scrollytelling element (e.g., 'text', 'image', 'video').
       - data: (object, required) The data associated with the element.
       - position: (integer, optional) The display order of the element.
     - Returns: The newly created element object.

Error Handling:
- Standard HTTP status codes will be used (e.g., 400 for bad requests, 404 for not found, 500 for server errors).
- Error responses will typically include a JSON object with an 'error' field describing the issue.
```

--------------------------------

### Access Local Documentation Site

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/README.md

This command provides the URL to access the documentation site when running in development mode.

```bash
echo "Dev on ${SITE_URL}/docs"
```

--------------------------------

### Next.js Image Component Usage

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/the-visualizer.mdx

Demonstrates the usage of the Next.js Image component to display an image with specified quality, sizes, and placeholder. This is used within the Scrollytelling Visualizer to render a preview or related graphic.

```jsx
import Image from "next/image";
import visualizerImg from "../public/assets/visualizer2.png";

<Image
  src={visualizerImg}
  quality={100}
  sizes="(max-width: 767px) 100vw, 1200px"
  placeholder="blur"
  alt="Hello"
/>
```

--------------------------------

### Global CSS Import

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/_app.mdx

Imports the global CSS file for the application, ensuring consistent styling across all components.

```css
@import "../css/global.css";
```

--------------------------------

### Animation Component API Documentation

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/api-reference/animation.mdx

API documentation for the Animation component, detailing its render props, their types, descriptions, and default values. Includes 'children', 'tween', and 'disabled' props.

```APIDOC
Animation:
  Appends a configurable anim to the timeline. Acts as a wrapper for the animation of children elements.

  Render Props:
    children: React.ReactNode - Children to animate
    tween: DataOrDataArray<TweenWithTargetDef> - Animation configuration
    disabled: boolean - Disable animations (Default: false)
```

--------------------------------

### Scrollytelling Root Component API

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/api-reference/root.mdx

Defines the root component for creating scroll-triggered animations and timelines. It manages the scroll context and configuration for child animation components.

```APIDOC
Scrollytelling.Root:
  Props:
    children: React.ReactNode | Optional: Children to animate, provide context to
    debug: object | Optional: Enables debugging features. See debug Props.
    start: enum | Optional: Start position of the scroll-triggered animation timeline. Defaults to "top top".
    end: enum | Optional: End position of the scroll-triggered animation timeline. Defaults to "bottom bottom".
    callbacks: enum | Optional: Includes callbacks for various ScrollTrigger events.
    scrub: boolean | number | Optional: Whether the animation should scrub (move proportionally with the scroll position). Defaults to true.
    defaults: object | Optional: An object of default values for the GSAP tween.
    toggleActions: string | Optional: Sets how the anim is handled at toggle points (onEnter, onLeave, onEnterBack, and onLeaveBack). See GSAP ScrollTrigger config object.
    trigger: string | DOM Element | Optional: Triggers the scroll animation. Can be a DOM element or a selector string.
    disabled: boolean | Optional: To disable the Scrollytelling component. Defaults to false.

  debug Props:
    label: string | Optional: Label to be displayed in the debug overlay.
    visualizer: boolean | undefined | Optional: Enable/disable visualizer.
    markers: boolean | undefined | Optional: Enable/disable timeline markers.
```

--------------------------------

### Next.js Image Component Usage

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/quick-start/core-concepts.mdx

Demonstrates the usage of the Next.js Image component for displaying an image with specified quality, sizes, and a blur placeholder. This is used within the scrollytelling context to render visual elements.

```jsx
import Image from "next/image";
import pinImg from "../../public/assets/pin.png";

<Image
  src={pinImg}
  quality={95}
  sizes="(max-width: 767px) 100vw, 840px"
  placeholder="blur"
  alt="Hello"
/>
```

--------------------------------

### Plain GSAP vs. BSMNT Scrollytelling Animation

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/index.mdx

Compares the implementation of scroll-based animations using plain GSAP with ScrollTrigger versus the BSMNT Scrollytelling library. The BSMNT version demonstrates a more component-based approach with simplified animation definitions.

```tsx
'use client' ;

import { gsap } from 'gsap' ;
import Scr011Trigger from 'gsap/dist /Scr011Trigger ' ;
import { useEffect } from 'react' ;

const Component = () => {
  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);

    const timeline = gsap.timeline({
      scr011Trigger: {
        scrub: true,
        trigger: ".container",
      },
    });

    timeline.from(".title"), {opacity: 0, scale: 0.9, duration: 0.5});
    timeline.to(".box", {rotate: 360, duration: 2});
    timeline.to(".box", {y: 100, duration: 0.3});

    return () => {
      timeline.revert();
    };
  }, []);

  return (
    <div className="container">
      <h1 className="title">Hello World</h1>
      <div className="box" />
    </div>
  );
};

```

```tsx
import * as Scrollytelling from "@bsmnt/scrollytelling";

const Component = () => {
  return (
    <Scrollytelling.Root>
      <div className="container">
        <Scrollytelling.Animation
          tween={{ start: 0, end: 30, from: { opacity: 0, scale: 0.9 } }}
        >
          <h1 className="title">Hello World</h1>
        </Scrollytelling.Animation>
        <Scrollytelling.Animation
          tween={[
            { start: 30, end: 80, to: { rotate: 360 } },
            { start: 80, end: 100, to: { y: 100 } },
          ]}
        >
          <div className="box" />
        </Scrollytelling.Animation>
      </div>
    </Scrollytelling.Root>
  );
};

```

--------------------------------

### Waypoint API Documentation

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/api-reference/waypoint.mdx

Defines the properties and usage of the Waypoint component for triggering actions in a scrollytelling timeline.

```APIDOC
Waypoint:
  at: number
    Scrolled percentage of timeline at which the waypoint is triggered
  children: React.ReactNode
    Optional: children to animate
  tween: SimpleTween & { target?: TweenTarget }
    Optional: tween config and target, applied when the waypoint is triggered
  onCall: (() => void) | undefined
    Optional: called when the waypoint is triggered
  onReverseCall: (() => void) | undefined
    Optional: called when the waypoint is triggered on reverse
  label: string | undefined
    Optional: label for the waypoint
  disabled: boolean | undefined
    Optional: whether the waypoint is disabled (Default: false)
```

--------------------------------

### Stagger Component Usage

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/api-reference/stagger.mdx

Demonstrates how to use the Stagger component within a Scrollytelling Root to animate multiple child elements. It shows the required imports and the structure for applying overlap and tween properties.

```jsx
import * as Scrollytelling from "@bsmnt/scrollytelling";

export const HomePage = () => (
  <Scrollytelling.Root>
    <Scrollytelling.Stagger
      overlap={0.2}
      tween={{
        start: 0,
        end: 100,
        // Animation configuration here
      }}
    >
      <div className="animated-element">Element 1</div>
      <div className="animated-element">Element 2</div>
      <div className="animated-element">Element 3</div>
    </Scrollytelling.Stagger>
  </Scrollytelling.Root>
);
```

--------------------------------

### Next.js Font Configuration

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/_app.mdx

Defines custom font families 'Geist Sans' and 'Geist Mono' using the localFont hook from Next.js. It specifies the paths to the font files and their corresponding weights.

```javascript
import "../css/global.css";
import Head from "next/head";
import localFont from "next/font/local";

export const geistSans = localFont({
  src: [
    {
      path: "../public/font/Geist-Regular.woff2",
      weight: "400",
    },
    {
      path: "../public/font/Geist-Bold.woff2",
      weight: "700",
    },
  ],
});
export const geistMono = localFont({
  src: [
    {
      path: "../public/font/GeistMono-Regular.woff2",
      weight: "400",
    },
    {
      path: "../public/font/GeistMono-SemiBold.woff2",
      weight: "600",
    },
  ],
});

export default function MyApp({ Component, pageProps }) {

return (

<>
  <Head>
    <style
      type="text/css"
      dangerouslySetInnerHTML={{
        __html: `
        :root {
          --font-body: ${geistSans.style.fontFamily}, sans-serif;
          --font-mono: ${geistMono.style.fontFamily}, monospace;
        }
        `,
      }}
    />
  </Head>
  <Component {...pageProps} />
</>
);
}
```

--------------------------------

### useScrollytelling Hook Usage

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/utils/use-scrollytelling.mdx

Demonstrates how to use the `useScrollytelling` hook within a React component to access the animation timeline. This hook must be used inside a `Scrollytelling.Root` component.

```jsx
import { useScrollytelling } from "@bsmnt/scrollytelling";

// ...

const { timeline } = useScrollytelling();

useEffect(() => {
  if (!timeline) return;

  const doSomething = () => {
    // something
  };
});
```

--------------------------------

### Animation Component Usage

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/api-reference/animation.mdx

Demonstrates how to use the Animation component to animate a child element. It shows the import statement and the JSX structure for applying a tween animation to an H1 tag.

```jsx
import * as Scrollytelling from "@bsmnt/scrollytelling";

export const HomePage = () => (
  <Scrollytelling.Root disabled={isDisabled} key={i} debug={{ label: "texts" }}>
    <div style={{ height: "200vh", background: "black" }}>
      <div style={{ position: "sticky", top: 0 }}>
        <Scrollytelling.Animation
          tween={{
            start: 0,
            end: 100,
            to: { scale: 1.5 },
          }}
        >
          <h1
            style={{
              fontSize: "5rem",
              transformOrigin: "top left",
            }}
          >
            This is a text
          </h1>
        </Scrollytelling.Animation>
      </div>
    </div>
  </Scrollytelling.Root>
);
```

--------------------------------

### useScrollToLabel Hook

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/utils/use-scroll-to-label.mdx

The useScrollToLabel hook allows programmatic scrolling to specific labels within the scrollytelling experience. Labels are typically defined using the Waypoint component. It accepts an optional configuration object for scroll behavior and offset.

```javascript
useScrollToLabel(label: string, opts?: {
  behavior: "auto" | "instant" | "smooth",
  offset: number
}): void
```

--------------------------------

### ImageSequenceCanvas Component

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/utils/image-sequence-canvas.mdx

The ImageSequenceCanvas component is a helper for creating image sequence animations. It simplifies the process of displaying a series of images in sequence, often used for visual storytelling or animations within a scrollytelling context.

```jsx
import React from 'react';

interface ImageSequenceCanvasProps {
  images: string[];
  width: number;
  height: number;
  frameRate?: number;
  loop?: boolean;
  autoplay?: boolean;
  className?: string;
}

const ImageSequenceCanvas: React.FC<ImageSequenceCanvasProps> = ({
  images,
  width,
  height,
  frameRate = 24,
  loop = false,
  autoplay = true,
  className = '',
}) => {
  const [currentFrame, setCurrentFrame] = React.useState(0);
  const intervalRef = React.useRef<NodeJS.Timeout | null>(null);

  React.useEffect(() => {
    if (autoplay) {
      intervalRef.current = setInterval(() => {
        setCurrentFrame((prevFrame) => {
          if (prevFrame === images.length - 1) {
            return loop ? 0 : prevFrame;
          }
          return prevFrame + 1;
        });
      }, 1000 / frameRate);
    }

    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    };
  }, [autoplay, frameRate, loop, images.length]);

  return (
    <div className={`image-sequence-canvas ${className}`}>
      <img
        src={images[currentFrame]}
        alt={`Frame ${currentFrame}`}
        width={width}
        height={height}
        style={{ display: 'block' }}
      />
    </div>
  );
};

export default ImageSequenceCanvas;

```

--------------------------------

### Register GSAP Plugins

Source: https://github.com/basementstudio/scrollytelling/blob/main/docs/pages/utils/register-gsap-plugins.mdx

Registers custom GSAP plugins for use in specific scenarios. This component takes an array of GSAP plugin objects as its 'plugins' prop.

```tsx
import * as Scrollytelling from "@bsmnt/scrollytelling";
import { CSSRulePlugin } from "gsap/dist/CSSRulePlugin";
import { TextPlugin } from "gsap/dist/TextPlugin";

export const BaboldComp = () => {
  return (
    <>
      <Scrollytelling.RegisterGsapPlugins plugins={[CSSRulePlugin, TextPlugin]}>
      <Scrollytelling.Root scrub={0.75}>
        <div className={s["section"]}>
//...
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.