DSAP

Scroll down

Overview

DSAP is a streamlined library that equips you with a suite of functionalities for crafting compelling CSS-based animations.

What DSAP is not

DSAP is a specialized utility designed to enhance CSS animations with scroll and visibility tracking, complementing rather than replacing robust animation libraries like GSAP. It's optimized for performance, yet developers need to integrate it thoughtfully, ensuring it contributes to improved website performance metrics such as LCP and CLS, thereby facilitating smooth and captivating user interactions.

How to Implement DSAP

  • Visibility Tracking:

    Tag HTML elements with the data-dsap attribute to monitor their presence within the viewport.

  • Scroll Position Monitoring:

    Apply the data-dsap-scroll attribute to track an element's location in the viewport as it scrolls. This capability is essential for executing scroll-driven animations.

CSS Variables for DSAP Elements

DSAP imparts each element with specific CSS variables:

  • --dsap-scroll-delta: Reflects the vertical scroll progress of an element within the viewport, spanning from 0 to --dsap-max-scroll-delta. This measurement is not a percentage.
  • --dsap-max-scroll-delta: Defines the scale for scroll delta interpolation, with a default setting of 1000. This variable is crucial for formulating scroll-related animations.

Data Attributes for DSAP Elements

DSAP enhances elements with a set of data attributes for detailed animation control:

  • data-dsap: This attribute prompts DSAP to monitor the element. Upon initialisation, it will be assigned an identifier for CSS targeting.
  • data-dsap-scroll: Use this to opt-in to scroll position tracking
  • data-dsap-is: Offers a simple descriptor of the element's vertical position—whether it is "above", "in", or "below" the viewport.
  • data-dsap-seen: A boolean flag that determines if the element has ever been visible in the viewport.

Performance Considerations

DSAP has been fine-tuned for performance with the following methodologies:

  • Efficient Variable Updates: Instead of inline style adjustments for each element, DSAP modifies a single style element on scroll, enhancing efficiency. This approach relies on unique identifiers for DSAP elements, allowing precise targeting via the head style.
  • Optimized Scroll Event Handling: Scroll-related computations are delegated to requestAnimationFrame(), minimizing impact on the main thread and preventing performance bottlenecks. This function aligns with the user's display refresh rate, typically at 60Hz, to limit excessive processing and seamlessly adapts to higher refresh-rate screens, ensuring fluid animation transitions.

Get started

Download the latest release from GitHub or use the CDN:

<script type="module">
    import {DSAP} from "https://cdn.jsdelivr.net/gh/mrdarrengriffin/dsap@0.0.5/dist/dsap.es.js";
    let dsap = new DSAP();
</script>