Scrollxp

Alpine.js-esque library for scrolling animations on websites

Generate Convert Improve

Install / Use

/learn @weareferal/Scrollxp

About this skill

Quality Score

0/100

README

ScrollXP

ScrollXP is a library that makes it easy to drop scroll-related animations into your website using HTML data attributes. It's a bit like Alpine.js or Tailwind.css ... but for animations.

Overview

Creating animations can be tedious. It's not always clear where the code should go and there are a number of common animations you'll likely write over and over again. If you're not careful you JavaScript files can end up a mess. ScrollXP helps you avoid this by exposing a set of data attributes that you can drop directly into your HTML, making common animations quick and easy.

Demos

See some simple examples in action:

Installation

Via NPM:

$ npm install gsap scrollxp --save

Note: You need to use GSAP 3 or greater.

Include it in your script:

import ScrollXP from "scrollxp"

Or via CDN:

<script src="https://unpkg.com/gsap/dist/gsap.min.js"></script>
<script src="https://unpkg.com/scrollxp/dist/scrollxp.min.js"></script>

Quick Start

new ScrollXP({
  container: document.body,
})

ScrollXP uses GSAP (GreenSock) and ScrollMagic under-the-hood.

ScrollXP relies on the concept of "scenes" from ScrollMagic. A scene is a section of page that will act as a container or scope for particular animations. You define these scenes by adding the data-scene attribute to elements. You then add the animations you want to perform within the scene.

Check the documentation about how to create scenes, animations and parallax effect.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/gsap/dist/gsap.min.js"></script>
    <script src="https://unpkg.com/scrollxp/dist/scrollxp.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        display: flex;
        align-items: center;
        height: 200vh;
      }

      section {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      section>div {
        width: 300px;
        height: 300px;
        border: 10px solid #000;
      }
    </style>
  </head>
  <body>
    <section data-scene data-scene-duration="100%" data-scene-indicator="scene">
      <div data-animate data-animate-to-rotation="360"></div>
    </section>
    <script>
      new ScrollXP({
        container: document.body,
      });
    </script>
  </body>
</html>

Usage

Check out our documentation for more detailed configuration and usage:

Questions?

File a GitHub issue please.

Author

Feral

License

ScrollXP is available under the MIT license. See the LICENSE file for more info.

Related Skills

node-connect

334.5k

Diagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps

frontend-design

82.2k

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

openai-whisper-api

334.5k

Transcribe audio via OpenAI Audio Transcriptions API (Whisper).

commit-push-pr

82.2k

Commit, push, and open a PR