Nuxt Sal

A Nuxt module that adds Scroll Animation Library: https://github.com/mciastek/sal

• ✨  Release Notes

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add nuxt-sal

That's it! You can now use sal.js in your Nuxt app ✨

Basic usage

<div data-sal="fade"></div>

List of all available animations is available in Sal.js docs

Configuration

You can configure nuxt-sal in nuxt.config.js with the sal. Read more here: Sal.js docs

export default defineNuxtConfig({
  sal: {
    // Percentage of an element's area that needs to be visible to launch animation.
    threshold: 0.5,
    // Defines if animation needs to be launched once.
    once: true,
    // Flag (or a function returning boolean) for disabling animations
    disabled: false,
    // The element that is used as the viewport for checking visibility of the target
    root: window,
    // Selector of the elements to be animated
    selector: "[data-sal]",
    // Class name which triggers animation
    animateClassName: "sal-animate",
    // 	Class name which defines the disabled state
    disabledClassName: "sal-disabled",
    // Corresponds to root's bounding box margin
    rootMargin: "0% 50%",
    // Enter event name
    enterEventName: "sal:in",
    // Exit event name
    exitEventName: "sal:out",
  },
});

API

You can also use SAL instance. Read more here: Sal.js docs

const { $salInstance } = useNuxtApp();

$salInstance.enable(); // Enables animations
$salInstance.disable(); // Disables animations
$salInstance.reset(); // Resets instance and allows to pass new options
$salInstance.update(); // Updates observer with new elements to animated. Useful for dynamically injected HTML.

Contribution

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release