Web-Slinger.css: Like Wow.js But With CSS-y Scroll Animations

This article explores scroll animations, specifically focusing on "scroll triggering"—a technique where animations activate once a user scrolls past a specific point. While currently lacking native CSS support, we can achieve this effect using clever CSS techniques, creating a CSS-only alternative to JavaScript libraries like Wow.js. This approach utilizes the animation-timeline property, custom properties, and style queries.

Existing scroll animation solutions often reverse animations when scrolling upwards, unlike the desired "one-and-done" behavior seen in Wow.js. This limitation inspired the creation of "Web-Slinger.css," a pure CSS library mimicking Wow.js functionality.

Web-Slinger.css: A CSS-only Scroll Animation Library

Web-Slinger.css employs classes like .scroll-trigger-n and .on-scroll-trigger-n, along with custom properties (--scroll-trigger-n), to manage animations. This approach decouples animation triggers from the animated elements, providing flexibility.

A simple example uses .scroll-trigger-8 to trigger the "flipInY" animation from Animate.css. More complex examples, like the "Cownter" in the demo, demonstrate triggering multiple animations from a single scroll point.

The Cownter's markup is straightforward:

<div>
  <h2></h2>
  <div>
    <br><br><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">? Play again</a>
  </div>
</div>

And its CSS leverages style queries for dynamic content updates:

.header {
  .cownter::after {
    --cownter: calc(var(--scroll-trigger-2) + var(--scroll-trigger-4) + var(--scroll-trigger-8) + var(--scroll-trigger-11));
    --pluralised-cow: 'cows';
    counter-set: cownter var(--cownter);
    content: "Have " counter(cownter) " " var(--pluralised-cow) ", man";
  }

  @container style(--scroll-trigger-2: 1) and style(--scroll-trigger-4: 0) {
    .cownter::after {
      --pluralised-cow: 'cow';
    }
  }

  a {
    text-decoration: none;
    color: blue;
  }
}

:root:has(.reset:active) * {
  animation-name: none;
}

The demo utilizes Web-Slinger.css as an external resource.

Web-Slinger.css Implementation Details

The core concept involves using view() as an animation timeline to create a permanently fixed element. Style queries and custom properties then control other animations based on this fixed element's visibility.

This technique avoids directly animating user-visible elements, instead using the fixed element as a trigger. Named view progress timelines (timeline-scope) link the fixed element to the elements to be animated.

View CSS Code

/** Each trigger element toggles `--scroll-trigger-n` from 0 to 1, unpausing animations on `.on-scroll-trigger-n` **/
:root {
  animation-name: run-scroll-trigger-1, run-scroll-trigger-2 /*etc*/;
  animation-duration: 1ms;
  animation-fill-mode: forwards;
  animation-timeline: --trigger-timeline-1, --trigger-timeline-2 /*etc*/;
  timeline-scope: --trigger-timeline-1, --trigger-timeline-2 /*etc*/;
}

@property --scroll-trigger-1 {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@keyframes run-scroll-trigger-1 {
  to { --scroll-trigger-1: 1; }
}

/** Animate elements only when `.scroll-trigger-1` is in view **/
.on-scroll-trigger-1 { animation-play-state: paused; }
@container style(--scroll-trigger-1: 1) { .on-scroll-trigger-1 { animation-play-state: running; } }

/** Trigger element, fixed to top, activating animations **/
.scroll-trigger-1 { view-timeline-name: --trigger-timeline-1; }</integer>

Limitations and Future Improvements

Web-Slinger.css, while functional, generates larger CSS files with more triggers. The numbered class names lack semantic clarity. Ideally, native browser support would allow linking triggers and targets using IDs, similar to a hypothetical scrolltrigger attribute.

The future of scroll-triggered animations lies in native browser support. A declarative approach similar to Web-Slinger.css could be adopted for standardization.

The above is the detailed content of Web-Slinger.css: Like Wow.js But With CSS-y Scroll Animations. For more information, please follow other related articles on the PHP Chinese website!