### Start Development Server

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/README.md

Start the development server, which watches for file changes and compiles assets.

```sh
# Start development server, watch for changes, and compile assets
npm start
```

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

### Install Dependencies

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/demo/README.md

Switch to the recommended Node version and install project dependencies using npm.

```sh
nvm use

npm install
```

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

### Install Dependencies

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/README.md

Switch to the recommended Node version and install project dependencies using npm.

```sh
# Switch to recommended Node version from .nvmrc
nvm use

# Install dependencies from package.json
npm install
```

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

### Install Dependencies

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/README.md

Installs project dependencies using Yarn.

```bash
$ yarn
```

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

### Start Local Development Server

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/README.md

Starts a local development server for live previewing changes. The server restarts automatically upon file modifications.

```bash
$ yarn start
```

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

### v4 Parallax Example

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

Example of how parallax was configured in v4 using data-scroll-speed.

```html
<div data-scroll data-scroll-speed="2">Fast parallax</div>
```

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

### start()

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/documentation/methods.md

The start() method allows you to manually start the scroll. By default, the scroll automatically starts when you create the Locomotive Scroll instance. However, there may be situations where you need to programmatically control when the scroll starts.

```APIDOC
## start()

### Description
Manually starts the scroll behavior. Useful when `autoStart` is set to `false`.

### Method
`start()`

### Parameters
None

### Request Example
```js
const locomotiveScroll = new LocomotiveScroll({ autoStart: false });
requestAnimationFrame(() => {
    locomotiveScroll.start();
});
```

### Response
None
```

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

### Development Commands

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/demo/README.md

Start the development server to watch for changes and compile assets, or build the production site.

```sh
npm start

npm run build
```

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

### v4 ModularJS Callback Example

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

Example of triggering a ModularJS method using data-scroll-call in v4.

```html
<div data-scroll data-scroll-call="myMethod, MyModule">Trigger</div>
```

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

### CSS Example with Namespacing and BEM

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/docs/technologies.md

This HTML and SCSS example demonstrates the use of CSS namespaces (o-, c-, u-) and BEM naming conventions for structuring styles. It shows how to apply modifiers and combine object and component classes.

```html
<div class="c-block -large">
    <div class="c-block_layout o-layout">
        <div class="o-layout_item u-1/2@from-medium">
            <div class="c-block_heading o-h -medium">Heading</div>
        </div>
        <div class="o-layout_item u-1/2@from-medium">
           <a class="c-block_button o-button -outline" href="#">Button</a>
        </div>
    </div>
</div>
```

```scss
.c-block {
    &.-large {
        padding: rem(60px);
    }
}

.c-block_heading {
    @media (max-width: $to-medium) {
        .c-block.-large & {
            margin-bottom: rem(40px);
        }
    }
}
```

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

### ModularJS Example for Module Initialization

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/docs/technologies.md

This JavaScript example shows how to define a custom module using modularJS. It includes event handling for a 'load' action that adds a class to an element within the module's scope.

```html
<div data-module-example>
    <div data-example="main">
        <h2>Example</h2>
    </div>
    <button data-example="load">More</button>
</div>
```

```js
import { module } from 'modujs';

export default class extends module {
    constructor(m) {
        super(m);

        this.events = {
            click: {
                load: 'loadMore'
            }
        };
    }

    loadMore() {
        this.$('main')[0].classList.add('is-loading');
    }
}
```

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

### Locomotive Scroll v4 Instance Options Example

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

Example of initializing Locomotive Scroll in v4 with various options.

```javascript
const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true,
    direction: 'vertical',
    lerp: 0.1,
    multiplier: 1,
    class: 'is-inview',
    scrollbarClass: 'c-scrollbar',
});
```

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

### Example Versioning Output

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/docs/development.md

Illustrates the expected output after applying the versioning configurations, showing generated timestamps, hexadecimal values, and version increments.

```json
{
    "now": 1665071717350,
    "hex": "6ef54181c4ba",
    "hex": "1.0.2"
}
```

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

### v5 Native CustomEvent Listener Example

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

Example of listening for a native CustomEvent in v5 to control video playback.

```js
window.addEventListener('videoTrigger', (e) => {
    const { target, way, from } = e.detail;
    // way: 'enter' | 'leave'
    // from: 'start' | 'end'

    if (way === 'enter') {
        target.querySelector('video').play();
    }
});
```

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

### modularLoad for Page Transitions

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/docs/technologies.md

This example demonstrates how to initialize modularLoad for handling page transitions and lazy loading. It configures enter delays and specific transition behaviors.

```html
<nav>
    <a href="/">Home</a>
    <a href="/page" data-load="transitionName">Page</a>
</nav>
<div data-load-container>
    <img data-load-src="assets/images/hello.jpg">
</div>
```

```js
import modularLoad from 'modularload';

this.load = new modularLoad({
    enterDelay: 300,
    transitions: {
        transitionName: {
            enterDelay: 450
        }
    }
});
```

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

### Clone Repository

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/demo/README.md

Clone the boilerplate repository to start a new project. Navigate into the new project directory.

```sh
git clone https://github.com/locomotivemtl/astro-boilerplate.git my-new-project

cd my-new-project
```

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

### Install via NPM

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/getting-started/installation.md

Use this command to install the latest version of Locomotive Scroll using NPM.

```bash
npm install locomotive-scroll
```

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

### HTML Example of Responsive Grid Layout

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/docs/grid.md

Demonstrates a responsive grid layout with 4 columns on smaller screens and 12 columns from a medium breakpoint. Includes item classes for column spanning.

```html
<div class="o-container">
    <h1 class="c-heading -h1">Hello</h1>

    <div class="o-grid -col-4 -col-12@from-medium -gutters">
        <div class="o-grid_item u-gc-1/8@from-medium">
            <h2 class="c-heading -h2">This grid has 4 columns and 12 columns from `medium` MQ</h2>
        </div>

        <div class="o-grid_item u-gc-1/5@from-medium">
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
        </div>

        <div class="o-grid_item u-gc-5/9@from-medium">
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
        </div>

        <div class="o-grid_item u-gc-9/13@from-medium">
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
        </div>
    </div>
</div>
```

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

### Install Locomotive Scroll v4

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

Use this command to install version 4.1.4 of Locomotive Scroll.

```bash
npm install locomotive-scroll@4.1.4
```

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

### Disable Auto Start for RAF

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/documentation/options.md

Set `autoStart` to `false` to prevent the Request Animation Frame from starting automatically on initialization. Manually start the RAF using `locomotiveScroll.start()` when needed.

```js
// Default Value
const locomotiveScroll = new LocomotiveScroll({
    autoStart: false,
});

// Manually start the RAF
setTimeout(() => {
    locomotiveScroll.start();
}, 2000)
```

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

### v5 Native CustomEvent Trigger Example

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

Example of triggering a native CustomEvent using data-scroll-call in v5.

```html
<div data-scroll data-scroll-call="videoTrigger">Trigger</div>
```

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

### v5 Parallax Examples

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

Examples of parallax configuration in v5. By default, parallax is disabled on touch devices. Use data-scroll-enable-touch-speed to override this.

```html
<!-- Parallax disabled on touch by default -->
<div data-scroll data-scroll-speed=".5">Fast parallax (desktop only)</div>

<!-- Enable on touch devices -->
<div data-scroll data-scroll-speed=".5" data-scroll-enable-touch-speed>
    Fast parallax (all devices)
</div>
```

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

### Locomotive Scroll v4 Basic Setup (JavaScript)

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

Initialize Locomotive Scroll in v4, specifying the container element.

```javascript
import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true,
});
```

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

### Configure Styles Compilation with `styles`

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/docs/development.md

Use the `styles` task to compile Sass into CSS, with optional support for Autoprefixer via PostCSS. Ensure PostCSS and Autoprefixer are installed.

```json
{
    "styles": [
        {
            "label": "Text Editor CSS",
            "infile": "{% paths.styles.src %}/app/editor.scss",
            "outfile": "{% paths.styles.dest %}/app/editor.css"
        },
        {
            "label": "Application Dashboard CSS",
            "infile": "{% paths.styles.src %}/app/dashboard.scss",
            "outfile": "{% paths.styles.dest %}/app/dashboard.css"
        },
        {
            "label": "Public Site Critical CSS",
            "infile": "{% paths.styles.src %}/site/critical.scss",
            "outfile": "{% paths.styles.dest %}/site/critical.css"
        },
        {
            "label": "Public Site CSS",
            "infile": "{% paths.styles.src %}/site/main.scss",
            "outfile": "{% paths.styles.dest %}/site/main.css"
        }
    ]
}
```

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

### Manually Start Locomotive Scroll

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/documentation/methods.md

Call start() to manually initiate scrolling, especially when autoStart is set to false. It's recommended to call this within requestAnimationFrame for smooth initialization.

```javascript
const locomotiveScroll = new LocomotiveScroll({ autoStart: false });

// Starting the locomotive scroll on the next frame
requestAnimationFrame(() => {
    locomotiveScroll.start();
});
```

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

### v4 ModularJS Scroll Event Listener

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

Example of how scroll events were handled with ModularJS in v4.

```js
scroll.on('call', (func) => {
    this.call(...func); // ModularJS
});
```

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

### HTML Element for Scrolling

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/README.md

Example of an HTML element configured for scrolling with a specific speed.

```html
<div data-scroll data-scroll-speed="0.5">I move at half speed</div>
```

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

### Example HTML Structure for Scrolling

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/getting-started/usage.md

This HTML structure demonstrates how to set up elements for Locomotive Scroll, including a main container and elements with scroll attributes.

```html
<main style="height: 150vh;">
    <div>
        <h1>Hello 👋</h1>
    </div>
    <div>
        <h2 data-scroll data-scroll-speed="0.5">What's up?</h2>
        <p data-scroll data-scroll-speed="0.8">😬</p>
    </div>
</main>
```

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

### v5 Scroll Callback Example

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

Initialize Locomotive Scroll in v5 with a scroll callback to track scroll position, velocity, direction, and progress.

```javascript
const scroll = new LocomotiveScroll({
    scrollCallback: ({ scroll, velocity, direction, progress }) => {
        console.log(scroll); // Current scroll position
        console.log(velocity); // Scroll speed
        console.log(direction); // 1 (down/right), -1 (up/left), 0 (stopped)
        console.log(progress); // 0 to 1
    },
});
```

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

### Initialize Locomotive Scroll with Default Lenis Options

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/documentation/options.md

Configure Locomotive Scroll with default Lenis instance settings. This example shows how to set wrapper, content, lerp, duration, orientation, gesture orientation, smooth scrolling for wheel and touch, multipliers, normalization, and easing.

```javascript
const locomotiveScroll = new LocomotiveScroll({
    lenisOptions: {
        wrapper: window,
        content: document.documentElement,
        lerp: 0.1,
        duration: 1.2,
        orientation: 'vertical',
        gestureOrientation: 'vertical',
        smoothWheel: true,
        smoothTouch: false,
        wheelMultiplier: 1,
        touchMultiplier: 2,
        normalizeWheel: true,
        easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // https://www.desmos.com/calculator/brs54l4xou
    },
});
```

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

### v4 Scroll Event Listener

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

Example of listening to scroll events in v4 to access scroll data.

```js
scroll.on('scroll', (args) => {
    console.log(args.scroll.y);
    console.log(args.direction);
    console.log(args.speed);
});
```

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

### Version Update using RegExp Object (JavaScript)

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/docs/development.md

Provides a JavaScript example using a RegExp object to target and replace a version number, utilizing named capture groups.

```js
{
    key: new RegExp('(?<=^const ASSETS_VERSION = ')(?<version>\d+)(?=';$)'
}
```

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

### Locomotive Scroll v4 Basic Setup (HTML)

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

This HTML structure was required for v4, including `data-scroll-container` and `data-scroll-section`.

```html
<div data-scroll-container>
    <div data-scroll-section>
        <h1 data-scroll>Hey</h1>
    </div>
</div>
```

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

### Locomotive Scroll v5 Basic Setup (HTML)

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

In v5, the `data-scroll-container` and `data-scroll-section` attributes are no longer required in the HTML.

```html
<main>
    <h1 data-scroll>Hey</h1>
</main>
```

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

### SCSS Grid Settings Configuration

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/docs/grid.md

Set base column number and gap for the grid system in SCSS. This configuration file is part of the initial setup for the grid.

```scss
// Grid
// ==========================================================================
$base-column-nb: 12;
$base-column-gap: $unit-small;
```

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

### v5 Progress Tracking with data-scroll-event-progress

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

v5 uses custom events for progress tracking. Attach a listener to the specified 'data-scroll-event-progress' attribute to get progress details.

```html
<h1 data-scroll data-scroll-event-progress="heroProgress">Hero</h1>
```

```javascript
window.addEventListener('heroProgress', (e) => {
    console.log(e.detail.progress); // 0 to 1
});
```

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

### Initialize Locomotive Scroll for Example

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/getting-started/usage.md

This JavaScript initializes Locomotive Scroll, which will then apply effects to elements marked with 'data-scroll' attributes in the HTML.

```js
import LocomotiveScroll from 'locomotive-scroll';
const locomotiveScroll = new LocomotiveScroll();
```

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

### Configure File Concatenation with `concats`

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/docs/development.md

Use the `concats` task to combine multiple JavaScript files, with optional globbing support. Ensure tiny-glob is installed for globbing functionality.

```json
{
    "concats": [
        {
            "label": "Application Vendors",
            "includes": [
                "{% paths.scripts.src %}/vendors/*.js",
                "node_modules/focus-visible/dist/focus-visible.min.js",
                "node_modules/vue/dist/vue.min.js",
                "node_modules/vuelidate/dist/vuelidate.min.js",
                "node_modules/vuelidate/dist/validators.min.js"
            ],
            "outfile": "{% paths.scripts.dest %}/app/vendors.js"
        },
        {
            "label": "Public Site Vendors",
            "includes": [
                "{% paths.scripts.src %}/vendors/*.js",
                "node_modules/focus-visible/dist/focus-visible.min.js"
            ],
            "outfile": "{% paths.scripts.dest %}/site/vendors.js"
        }
    ]
}
```

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

### v5 Custom Scroll Container Setup

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

Configure Locomotive Scroll v5 to use custom scroll containers by providing 'wrapper' and 'content' elements via 'lenisOptions'.

```javascript
const scroll = new LocomotiveScroll({
    lenisOptions: {
        wrapper: document.querySelector('.scroll-container'),
        content: document.querySelector('.scroll-content'),
    },
});
```

```html
<div class="scroll-container" style="height: 100vh; overflow: hidden;">
    <div class="scroll-content">
        <div data-scroll data-scroll-speed="0.5">Parallax works here too!</div>
    </div>
</div>
```

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

### Locomotive Scroll v5 HTML Structure

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

Example HTML structure for Locomotive Scroll v5, using a main element and simplified data attributes. Sticky elements are now handled via CSS.

```html
<main>
    <h1 data-scroll data-scroll-event-progress="heroProgress">Hero</h1>
    <div data-scroll data-scroll-speed="2">Parallax</div>
    <div data-scroll data-scroll-call="videoPlay">Video</div>
    <div class="sticky">Sticky</div>
    <div>End</div>
</main>
```

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

### Set Scroll Position Trigger

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/documentation/attributes.md

Configure the trigger position for an element within the scroll container using `data-scroll-position`. It accepts 'start', 'middle', or 'end' for entry and exit points.

```html
<div data-scroll data-scroll-position="start, start"></div>
```

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

### Locomotive Scroll v4 HTML Structure

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

Example HTML structure used with Locomotive Scroll v4, including data attributes for scroll containers, sections, elements, and parallax effects.

```html
<div data-scroll-container>
    <div data-scroll-section>
        <h1 data-scroll data-scroll-id="hero">Hero</h1>
        <div data-scroll data-scroll-speed="2">Parallax</div>
        <div data-scroll data-scroll-call="videoPlay, VideoModule">Video</div>
        <div data-scroll-sticky data-scroll-style="#end">Sticky</div>
    </div>
    <div id="end" data-scroll-section>End</div>
</div>
```

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

### Build Static Website

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/README.md

Generates the static content for the website into the 'build' directory, ready for hosting.

```bash
$ yarn build
```

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

### Clone Repository and Navigate

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/README.md

Clone the boilerplate repository and change into the new project directory.

```sh
# Clone the repository.
git clone https://github.com/locomotivemtl/locomotive-boilerplate.git my-new-project

# Enter the newly-cloned directory.
cd my-new-project
```

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

### Deploy Website (using SSH)

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/README.md

Deploys the website using SSH. This command builds the site and pushes it to the 'gh-pages' branch.

```bash
$ USE_SSH=true yarn deploy
```

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

### Configure Script Bundling with `scripts`

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/docs/development.md

Utilize the `scripts` task, a wrapper around esbuild, for bundling and minifying modern JavaScript modules. Specify input files and the desired output file path.

```json
{
    "scripts": [
        {
            "label": "Application Dashboard JS",
            "includes": [
                "{% paths.scripts.src %}/app/dashboard.js"
            ],
            "outfile": "{% paths.scripts.dest %}/app/dashboard.js"
        },
        {
            "label": "Public Site JS",
            "includes": [
                "{% paths.scripts.src %}/site/main.js"
            ],
            "outfile": "{% paths.scripts.dest %}/site/main.js"
        }
    ]
}
```

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

### Build and Minify Assets

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/README.md

Compile and minify project assets for production.

```sh
# Compile and minify assets
npm run build
```

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

### v4 Performance Optimization Pattern

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

v4 recommended splitting content into sections using 'data-scroll-container' and 'data-scroll-section' for better performance.

```html
<!-- Recommended: Split into sections for better performance -->
<div data-scroll-container>
    <div data-scroll-section>
        <!-- Content here -->
    </div>
    <div data-scroll-section>
        <!-- More content -->
    </div>
</div>
```

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

### v5 Scroll Methods

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

Shows v5 scroll methods, primarily focusing on 'resize' for manual triggers and 'destroy'. Initialization is done by creating a new instance.

```javascript
scroll.resize(); // Rarely needed (auto-synced with Lenis)
scroll.destroy();
// No init() - create new instance instead
```

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

### Build Assets

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/docs/development.md

Compiles and minifies project assets for production. This command is used to prepare the project for deployment.

```sh
npm run build
```

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

### Configure Development Server

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/docs/development.md

Configures the BrowserSync development server. Options like opening the browser automatically and using HTTPS can be set here.

```json
{
    "server": {
        "open": true,
        "https": {
            "key": "~/.config/valet/Certificates/{% paths.url %}.key",
            "cert": "~/.config/valet/Certificates/{% paths.url %}.crt"
        }
    }
}
```

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

### Specify JSON Field for Versioning

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/docs/development.md

Demonstrates how to explicitly target a JSON field for versioning updates using a 'json:' prefix in the key.

```json
{
    "key": "json:version"
}
```

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

### Configure Asset Versioning Formats

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/docs/development.md

Defines different formats for generating versioning keys like timestamps, hexadecimal strings, or semantic version increments. Specifies the output file for updated assets.

```json
{
    "versions": [
        {
            "format": "timestamp",
            "key": "now",
            "outfile": "./assets.json"
        },
        {
            "format": "hex:8",
            "key": "hex",
            "outfile": "./assets.json"
        },
        {
            "format": "inc:semver",
            "key": "inc",
            "outfile": "./assets.json"
        }
    ]
}
```

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

### Deploy Website (not using SSH)

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/README.md

Deploys the website without using SSH. Requires specifying the GitHub username. This command builds the site and pushes it to the 'gh-pages' branch.

```bash
$ GIT_USER=<Your GitHub username> yarn deploy
```

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

### Configure Public Directory

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/docs/development.md

Defines the public web directory for the project. The development server uses this as the base directory to serve the website from.

```json
{
    "paths": {
        "dest": "./www"
    }
}
```

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

### Configure Paths for Styles

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/docs/development.md

Defines source and destination paths for styles. Used within template tags to reference these paths during asset processing.

```jsonc
{
    "paths": {
        "styles": {
            "src": "./assets/styles",
            "dest": "./www/assets/styles"
        }
    },
    "tasks": {
        "styles": [
            {
                "infile": "{% paths.styles.src %}/main.scss", // → ./assets/styles/main.scss
                "outfile": "{% paths.styles.dest %}/main.css" // → ./www/assets/styles/main.css
            }
        ]
    }
}
```

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

### v4 Scroll Methods

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

Demonstrates common scroll manipulation methods in v4, including updating, destroying, and reinitializing the scroll instance.

```javascript
scroll.update();
scroll.destroy();
scroll.init(); // Reinitialize
```

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

### Configure Asset Processing Tasks

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/docs/development.md

Configures which assets should be processed and how. This includes defining input files and output locations for scripts and styles.

```json
{
    "tasks": {
        "scripts": [
            {
                "includes": [
                    "./assets/scripts/app.js"
                ],
                "outfile": "./assets/scripts/app.js"
            }
        ],
        "styles": [
            {
                "infile": "./assets/styles/main.scss",
                "outfile": "./www/assets/styles/main.css"
            }
        ]
    }
}
```

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

### Link Essential Styles via CDN

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/getting-started/usage.md

Alternatively, link the bundled CSS file directly from a CDN in your HTML.

```html
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/locomotive-scroll/bundled/locomotive-scroll.css"
/>
```

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

### Configure Base URI

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/docs/development.md

Sets the base URI for the project. This is used by the development server as a proxy for a virtual host.

```json
{
    "paths": {
        "url": "locomotive-boilerplate.test"
    }
}
```

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

### Version Update using RegExp Literal (JavaScript)

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/docs/development.md

Illustrates updating a version string using a JavaScript regular expression literal, targeting a specific pattern.

```js
{
    key: /^ \* Version: +(?:.+?)\+(.+?)$/
}
```

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

### Include via CDN

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/getting-started/installation.md

Include Locomotive Scroll in your HTML using a CDN link and initialize it.

```html
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll/bundled/locomotive-scroll.min.js"></script>
<script>
    const locomotiveScroll = new LocomotiveScroll();
</script>
```

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

### Initialize with a Bundler

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/getting-started/usage.md

Use this snippet when integrating Locomotive Scroll with a JavaScript bundler like Webpack or Vite.

```js
import LocomotiveScroll from 'locomotive-scroll';

const locomotiveScroll = new LocomotiveScroll();
```

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

### Locomotive Scroll v5 Instance Options Equivalent

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

Initialize Locomotive Scroll in v5, mapping v4 options to `lenisOptions` and accessing Lenis instance properties.

```javascript
const scroll = new LocomotiveScroll({
    lenisOptions: {
        orientation: 'vertical',
        lerp: 0.1,
        wheelMultiplier: 1,
    },
});

// Access Lenis directly for more control
console.log(scroll.lenisInstance.direction); // Get direction
console.log(scroll.lenisInstance.velocity); // Get speed
```

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

### v5 Progress Tracking with CSS Variables

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

v5 supports progress tracking via CSS variables. Apply styles directly to elements with the 'data-scroll-css-progress' attribute.

```html
<h1 data-scroll data-scroll-css-progress>Hero</h1>
```

```css
[data-scroll-css-progress] {
    opacity: calc(var(--progress) * 1);
    transform: translateY(calc((1 - var(--progress)) * 100px));
}
```

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

### Implicit JSON Field Versioning

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/docs/development.md

Shows how the versioning task can implicitly use the key name as the JSON field name if no 'json:' prefix is provided.

```json
{
    "key": "version"
}
```

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

### v5 Sticky Element Implementation with CSS

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

v5 recommends using native CSS 'position: sticky' for sticky elements, removing the need for JavaScript implementation.

```html
<div class="sticky-element">Sticky element</div>
```

```css
.sticky-element {
    position: sticky;
    top: 0;
}
```

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

### Locomotive Scroll v5 JavaScript Initialization and Event Listeners

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

JavaScript code for initializing Locomotive Scroll v5 with lenisOptions for orientation and lerp. Demonstrates using scrollCallback and window event listeners for progress and custom calls.

```javascript
import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
    lenisOptions: {
        orientation: 'vertical',
        lerp: 0.1,
    },
    scrollCallback: ({ scroll, velocity, direction, progress }) => {
        // Global scroll callback if needed
    },
});

// Progress tracking
window.addEventListener('heroProgress', (e) => {
    console.log(e.detail.progress);
});

// Video callback
window.addEventListener('videoPlay', (e) => {
    const { target, way } = e.detail;
    if (way === 'enter') {
        target.querySelector('video').play();
    }
});
```

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

### Initialize and Destroy Custom Ticker with GSAP

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/documentation/options.md

Use `initCustomTicker` and `destroyCustomTicker` to integrate an external ticker, like GSAP's ticker, instead of Locomotive Scroll's default request animation frame.

```js
import LocomotiveScroll from 'locomotive-scroll';
import { gsap } from 'gsap/all';

const locomotiveScroll = new LocomotiveScroll({
    initCustomTicker: (render) => {
        gsap.ticker.add(render);
    },
    destroyCustomTicker: (render) => {
        gsap.ticker.remove(render);
    },
});
```

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

### Configure SVG Processing with `svgs`

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/docs/development.md

Configure the `svgs` task to transform, minify, and generate SVG spritesheets. Specify input SVG files using glob patterns and define the output sprite file.

```json
{
    "svgs": [
        {
            "label": "Application Spritesheet",
            "includes": [
                "{% paths.images.src %}/app/*.svg"
            ],
            "outfile": "{% paths.svgs.dest %}/app/sprite.svg"
        },
        {
            "label": "Public Site Spritesheet",
            "includes": [
                "{% paths.images.src %}/site/*.svg"
            ],
            "outfile": "{% paths.svgs.dest %}/site/sprite.svg"
        }
    ]
}
```

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

### PurgeCSS Configuration for Grid System

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/docs/grid.md

Configure PurgeCSS to scan project files for grid system CSS classes. This is essential for removing unused CSS in Charcoal projects.

```jsonc
"purgeCSS": {
    "content": [
        "./views/app/template/**/*.mustache",
        "./src/App/Template/*.php",
        "./assets/scripts/**/*" // use case: `el.classList.add('u-gc-1/2')`
    ]
}
```

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

### Import Locomotive Scroll CSS

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/README.md

Import the necessary CSS file for Locomotive Scroll.

```css
@import 'locomotive-scroll/dist/locomotive-scroll.css';
```

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

### Version Update using Regular Expression (JSON)

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/docs/development.md

Uses a regular expression with named capture groups to find and replace a version number within a JSON file.

```json
{
    "key": "regexp:(?<=^const ASSETS_VERSION = ')(?<build>\d+)(?=';$)"
}
```

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

### Initialize Locomotive Scroll

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/README.md

Import and initialize LocomotiveScroll in your JavaScript code.

```javascript
import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll();
```

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

### Scrolling to a Target Element

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/documentation/methods.md

Demonstrates how to use the scrollTo method to scroll to a specific DOM element. Requires importing LocomotiveScroll and initializing an instance.

```javascript
import LocomotiveScroll from 'locomotive-scroll';

const locomotiveScroll = new LocomotiveScroll();
const $target = document.getElementById('jsTarget');

function scrollTo(params) {
    const { target, options } = params;
    locomotiveScroll.scrollTo(target, options);
}

scrollTo({ target: $target, options: {} });
```

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

### stop()

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/documentation/methods.md

The stop() method allows you to manually stop the scroll. When you call this method, the scroll motion will come to a halt.

```APIDOC
## stop()

### Description
Manually stops the scroll behavior.

### Method
`stop()`

### Parameters
None

### Request Example
```js
const locomotiveScroll = new LocomotiveScroll();
requestAnimationFrame(() => {
    locomotiveScroll.stop();
});
```

### Response
None
```

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

### Custom Scroll Callback Function

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/documentation/options.md

Provide a `scrollCallback` function to receive scroll-related data such as position, limits, velocity, direction, and progress. This leverages Lenis's scroll callback feature.

```js
import LocomotiveScroll from 'locomotive-scroll';

function onScroll({ scroll, limit, velocity, direction, progress }) {
    console.log(scroll, limit, velocity, direction, progress);
}

const locomotiveScroll = new LocomotiveScroll({
    scrollCallback: onScroll,
});
```

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

### v4 Sticky Element Implementation

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

In v4, sticky elements were implemented using 'data-scroll-sticky' and 'data-scroll-target' attributes.

```html
<div data-scroll data-scroll-sticky data-scroll-target="#target">
    Sticky element
</div>

<div id="target">Target</div>
```

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

### resize()

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/documentation/methods.md

The resize() method allows you to manually trigger the resize callback of the Locomotive Scroll instance. This is useful when you need to handle resizing events programmatically or when you want to manually update the scroll calculations after a layout change.

```APIDOC
## resize()

### Description
Manually triggers the resize callback to update scroll calculations after a layout change. Rarely needed as Locomotive Scroll handles resize events automatically.

### Method
`resize()`

### Parameters
None

### Request Example
```js
const locomotiveScroll = new LocomotiveScroll();
locomotiveScroll.resize();
```

### Response
None
```

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

### scrollTo(target, options)

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/documentation/methods.md

Allows you to scroll to a specific target on the page with various configuration options for animation and behavior.

```APIDOC
## scrollTo(target, options)

### Description
The `scrollTo(target, options)` method allows you to scroll to a specific target on the page. It provides a smooth scrolling experience with customizable animation and behavior.

### Method
`scrollTo`

### Parameters
#### Target Parameter
- **target** (number / HTMLElement / string) - Optional - The target to scroll to. It can be a number representing the scroll position, an HTMLElement, or a string (CSS selector or keyword: `top`, `left`, `start`, `bottom`, `right`, `end`).

#### Options Parameter
- **options** (ILenisScrollToOptions) - Optional - An options object that configures the scroll behavior. The available options are:
    - **offset** (number) - A number equivalent to `scroll-padding-top`. Specifies the offset from the top of the target element.
    - **lerp** (number) - Animation lerp intensity.
    - **duration** (number) - The duration of the scroll animation in seconds.
    - **immediate** (boolean) - If set to `true`, it ignores the duration and easing and performs an immediate scroll.
    - **lock** (boolean) - Whether or not to prevent the user from scrolling until the target is reached.
    - **force** (boolean) - Reach the target even if the instance is stopped.
    - **onComplete** (function) - A callback function called when the target is reached.
    - **easing** (function) - A smooth scroll easing function.

### Usage Example
```js
import LocomotiveScroll from 'locomotive-scroll';

const locomotiveScroll = new LocomotiveScroll();
const $target = document.getElementById('jsTarget');

function scrollToElement(target, options) {
    locomotiveScroll.scrollTo(target, options);
}

// Example: Scroll to an element with default options
scrollToElement($target, {});

// Example: Scroll to the top of the page with a duration
scrollToElement('top', { duration: 1 });
```
```

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

### SCSS Grid Object Styles

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/landing/docs/grid.md

Defines the core grid styles, including display, margins, padding, and template columns. Supports responsive column layouts via media queries.

```scss
.o-grid {
    display: grid;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;

    // ==========================================================================
    // Cols
    // ==========================================================================
    &.-col-#{$base-column-nb} {
        grid-template-columns: repeat(#{$base-column-nb}, 1fr);
    }

    &.-col-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    &.-col-#{$base-column-nb}\@from-medium {
        @media (min-width: $from-medium) {
            grid-template-columns: repeat(#{$base-column-nb}, 1fr);
        }
    }
    // …
```

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

### Listen for Progress Event

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/documentation/attributes.md

Import Locomotive Scroll and add an event listener for the custom progress event. The event detail includes the target element and its scroll progress (0 to 1).

```javascript
import LocomotiveScroll from 'locomotive-scroll';

const locomotiveScroll = new LocomotiveScroll();

window.addEventListener('progressEvent', (e) => {
    const { target, progress } = e.detail;
    console.log(`target: ${target}`, `progress: ${progress}`);
});
```

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

### Locomotive Scroll v4 JavaScript Initialization and Scroll Events

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

JavaScript code for initializing Locomotive Scroll v4 with options like el, smooth, direction, and lerp. Includes event listeners for 'scroll' and 'call' events.

```javascript
import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true,
    direction: 'vertical',
    lerp: 0.1,
    class: 'is-inview',
});

scroll.on('scroll', (args) => {
    if (args.currentElements['hero']) {
        console.log(args.currentElements['hero'].progress);
    }
});

scroll.on('call', (func) => {
    this.call(...func); // ModularJS
});
```

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

### Listen for Custom Scroll Event

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/documentation/attributes.md

Add an event listener to the window for the custom event specified by `data-scroll-call`. The event detail provides target, way, and from information.

```javascript
window.addEventListener('scrollEvent', (e) => {
    const { target, way, from } = e.detail;
    console.log(`target: ${target}`, `way: ${way}`, `from: ${from}`);
});
```

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

### Sass Import

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/getting-started/usage.md

If you are using Sass, you can import Locomotive Scroll's styles directly.

```scss
// Vendors
@import 'node_modules/locomotive-scroll/dist/locomotive-scroll';
```

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

### Manually Trigger Resize Callback

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/documentation/methods.md

Invoke resize() to manually update scroll calculations after layout changes. Locomotive Scroll typically handles this automatically via ResizeObservers.

```javascript
const locomotiveScroll = new LocomotiveScroll();
locomotiveScroll.resize();
```

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

### v4 Progress Tracking with data-scroll-id

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/migration-guide.md

In v4, track element progress using the 'scroll' event and 'currentElements' data, identified by 'data-scroll-id'.

```html
<h1 data-scroll data-scroll-id="hero">Hero</h1>
```

```javascript
scroll.on('scroll', (args) => {
    if (args.currentElements['hero']) {
        let progress = args.currentElements['hero'].progress;
        console.log(progress); // 0 to 1
    }
});
```

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

### Apply Custom In-View Class

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/documentation/attributes.md

Use `data-scroll-class` to specify a custom CSS class that will be applied to an element when it enters the viewport. The default class is 'is-inview'.

```html
<div data-scroll data-scroll-class="my-custom-class"></div>
```

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

### Trigger Progress Custom Event

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/documentation/attributes.md

Use `data-scroll-event-progress` to trigger a custom event that provides the element's scroll progress. This allows for dynamic updates based on scroll position.

```html
<div data-scroll data-scroll-event-progress="progressEvent">
    Progress custom event
</div>
```

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

### Enable Repeat In-View Detection

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/documentation/attributes.md

Set the `data-scroll-repeat` attribute on an element to allow its in-view detection to trigger multiple times as it scrolls in and out of the viewport.

```html
<div data-scroll data-scroll-repeat></div>
```

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

### Initialize Locomotive Scroll with Custom Scroll Container

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/documentation/options.md

Configure Locomotive Scroll to use a custom scroll container and content element. Ensure the wrapper has a fixed height and overflow hidden, and the content is its direct child.

```javascript
const locomotiveScroll = new LocomotiveScroll({
    lenisOptions: {
        wrapper: document.querySelector('.scroll-container'),
        content: document.querySelector('.scroll-content'),
    },
});
```

```html
<div class="scroll-container" style="height: 100vh; overflow: hidden;">
    <div class="scroll-content">
        <div data-scroll data-scroll-speed="0.5">Parallax element</div>
    </div>
</div>
```

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

### addScrollElements($newContainer)

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/documentation/methods.md

The addScrollElements($newContainer) method allows you to dynamically observe scroll elements (`[data-scroll]`) by providing their container. This is particularly useful when you're updating the DOM dynamically.

```APIDOC
## addScrollElements($newContainer)

### Description
Dynamically observes scroll elements within a specified container. Useful for DOM updates.

### Method
`addScrollElements($newContainer)`

### Parameters
#### Path Parameters
*   **$newContainer** (HTMLElement) - Required - The parent element containing the scroll elements to observe, which has been added to the DOM.

### Request Example
```js
const locomotiveScroll = new LocomotiveScroll();
const $newContainer = document.getElementById('containerToAdd');
locomotiveScroll.addScrollElements($newContainer);
```

### Response
None
```

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

### Enable Viewport Detection

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/documentation/attributes.md

Use the `data-scroll` attribute to enable viewport detection on an HTML element. This is the primary attribute for integrating elements with Locomotive Scroll's tracking.

```html
<div data-scroll></div>
```

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

### Add Scroll Elements to Container

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/documentation/methods.md

Call addScrollElements($newContainer) to dynamically observe scroll elements within a newly added container. Pass the HTMLElement container as the argument.

```javascript
const locomotiveScroll = new LocomotiveScroll();
const $newContainer = document.getElementById('containerToAdd');

// Call the method to add scroll elements from the new container
locomotiveScroll.addScrollElements($newContainer);
```

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

### Trigger Custom Scroll Event

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/documentation/attributes.md

Use `data-scroll-call` to trigger a custom event when an element enters the viewport. Listen for this event in JavaScript to perform actions.

```html
<div data-scroll data-scroll-call="scrollEvent">Trigger</div>
```

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

### Set Scroll Offset Trigger

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/documentation/attributes.md

Define the trigger offset for an element using `data-scroll-offset`. Offsets can be in pixels or percentages of the viewport height for entry and exit.

```html
<div data-scroll data-scroll-offset="400, 200"></div>
```

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

### Horizontal Scrolling Styles

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/getting-started/usage.md

Apply these CSS rules when using the horizontal scrolling feature to ensure proper layout.

```css
/* Only necessary with horizontal scrolling */
html[data-scroll-orientation='horizontal'] {
    body {
        width: fit-content;
    }
    [data-scroll-container] {
        display: flex;
    }
}
```

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

### Configure Trigger Root Margin

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/documentation/options.md

Set the root margin for IntersectionObserver to control when scroll elements are triggered. The default value is '-1px -1px -1px -1px'.

```javascript
// Default Value
const locomotiveScroll = new LocomotiveScroll({
    triggerRootMargin: '-1px -1px -1px -1px',
});
```

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

### Preventing Scroll Smoothing for Specific Elements

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/extras/limitations.md

Use the `prevent` option in Lenis to manually control scroll smoothing. This is useful for dynamically injected elements like popups where the `data-lenis-prevent` attribute cannot be applied.

```javascript
import LocomotiveScroll from 'locomotive-scroll';

const locomotiveScroll = new LocomotiveScroll({
    lenisOptions: {
        prevent: (node) => node.getAttribute('id') === 'modalSelector',
    },
});
```

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

### Configure Parallax Speed

Source: https://github.com/locomotivemtl/locomotive-scroll/blob/main/packages/docs/docs/documentation/attributes.md

Control the parallax effect intensity with `data-scroll-speed`. The value is relative to the scroll container size, ensuring consistent effects across different viewports.

```html
<div data-scroll data-scroll-speed="1"></div>
```

```html
<div data-scroll data-scroll-speed="0.5"></div>
```

```html
<div data-scroll data-scroll-speed="-0.3"></div>
```