YASL -- Yet-another-scroll-library

YASL (Yet Another Scroll Library) detects when an element becomes visible in the viewport and can trigger animations on that element or on another target element. Animations can be executed using either CSS or JavaScript.

🚀 Quick Start

npm:

npm i yasl-scroll

jsDelivr:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/yasl.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/yasl.min.js"></script>

Import all dependencies and select elements using jQuery, HTML attributes, or Hotwire Stimulus:

Bind YASL with jQuery:

<!-- CDN or node_modules -->
<link rel="stylesheet" href="yasl.min.css">
<script src="jquery.min.js"></script>
<script src="yasl.min.js"></script>

<div id="target" style="width: 100px; height: 100px; background-color: blue;"></div>

<script>
  let callback = function () {
    console.log('I\'m visible!\'');
  };

  $('#target').yasl(callback).startView();
</script>

Bind YASL with HTML attributes:

<!-- CDN or node_modules -->
<link rel="stylesheet" href="yasl.min.css">
<script src="jquery.min.js"></script>
<script src="yasl.min.js"></script>

<div data-yasl style="width: 100px; height: 100px; background-color: blue;"></div>

<script>
  let callback = function () {
    console.log('I\'m visible!\'');
  };

  document.addEventListener('yasl:enter', callback);
</script>

Bind YASL with Stimulus:

<!-- CDN or node_modules -->
<link rel="stylesheet" href="yasl.min.css">
<script src="jquery.min.js"></script>
<script src="yasl.min.js"></script>

<div data-controller="yasl" style="width: 100px; height: 100px; background-color: blue;"></div>

<script>
  let callback = function () {
    console.log('I\'m visible!\'');
  };

  document.addEventListener('yasl:enter', callback);
</script>

IMPORTANT: If you handle multiple elements, make sure to assign a unique event name to each instance.

<div
    data-controller="yasl"
    data-yasl-entry-event-name="yasl:myUniqueEventName"
    style="width: 100px; height: 100px; background-color: blue;"
></div>

<script>
  let callback = function () {
    console.log('I\'m visible!\'');
  };
  
  document.addEventListener('yasl:myUniqueEventName', callback);
</script>

Animations

<!-- CDN or node_modules -->
<link rel="stylesheet" href="yasl.min.css">
<script src="jquery.min.js"></script>
<script src="yasl.min.js"></script>

<div
  data-yasl
  data-yasl-animations="fade-move-left"
  style="width: 100px; height: 100px; background-color: blue;"
></div>

For in-depth explanations and examples, visit the documentation.

Full documentation and examples:

✨ Features

• Detects when elements enter or leave the viewport
• Triggers events when elements move into or out of view
• Fully configurable, including the threshold (how much of the element must be visible)
• Choose one or multiple predefined animations — all are configurable to your needs
• Uses the IntersectionObserver API with a graceful fallback
• Animations can be driven by GPU-accelerated CSS or by JavaScript for more fine-grained control

📦 Installation & Usage

1. npm i yasl-scroll
2. Include the JS and CSS files in your page
3. Bind elements using jQuery, HTML attributes, or Stimulus
4. Configure each instance individually
5. Animate or react to events when elements enter or leave the viewport

Details → Documentation

🤝 Contributing

Issues & PRs: GitHub Repository

📄 License

GPL-2.0-or-later LICENSE