dom-flowt
GitHub

Hardware-Accelerated Scroll Animations. Zero CSS Required.

Dom Flowt v3 completely replaces legacy CSS stylesheet dependencies with the Web Animations API (WAAPI). Declarative HTML attributes meet 60fps native performance in a lightweight 1.2kB library.

Try Live Studio Download V3 Beta Read Documentation
0 kB
CSS File Overhead
60 FPS
WAAPI Off-Main-Thread
14
Built-in Keyframe Presets
100%
IntersectionObserver

Interactive Preset Studio

Select keyframe presets, adjust timing, and test the WAAPI output live.

Duration (ms) 500 ms
Repeat Mode
Preview Element
Preset: fade

Animated Component

This DOM node is executed using the Web Animations API `element.animate()` with standard keyframes.

Generated HTML Attribute Code 
<div dom-flowt-is-visible="false" dom-flowt-type="fade" dom-flowt-duration="500" dom-flowt-repeat="repeat">
  <!-- Your content here -->
</div>

Live Scroll Triggers

Scroll down to observe `dom-flowt` detecting elements entering viewport and executing WAAPI keyframe presets smoothly.

float-up

Smooth Y-axis translate upward with subtle opacity entry. Clean and modern for feature lists.

dom-flowt-type="float" dom-flowt-style="up"

float-up-bounce

Adds an energetic dampening spring at the end of the float animation using 4-stage keyframe offsets.

dom-flowt-style="up-bounce"

pop-up

Combines vertical displacement with a scale transition from 90% to 100% full dimension.

dom-flowt-type="pop" dom-flowt-style="up"

float-right-bounce

Horizontal slide from left to right with a gentle bounce cushion effect upon arrival.

dom-flowt-style="right-bounce"

flip-horizontal

3D rotation along the Y-axis from 90 degrees to 0 degrees for impactful hero reveals.

dom-flowt-type="flip" dom-flowt-style="horizontal"

jump

Playful multi-stage vertical jump with scale distortion mimicking physical squash and stretch.

dom-flowt-type="jump"

Why Web Animations API (WAAPI)?

Version 3 transforms dom-flowt into a zero-CSS library. Here is how native WAAPI compares to legacy CSS stylesheets.

Legacy CSS Toggling (v2.x)
  • Requires linking an external `.css` stylesheet or bundling global keyframes.
  • Relies on class manipulation (`classList.add('dom-flowt-fade')`) and `animationend` listeners.
  • Potential class name collisions with existing application CSS frameworks.
  • Extra network requests to load stylesheets before DOM rendering completes.
Dom Flowt v3 WAAPI Engine
  • Zero CSS: Keyframes stored as pure JavaScript object presets.
  • Compositor Thread Execution: `element.animate()` runs directly on the browser's GPU compositor.
  • Dynamic Parameters: Durations, offsets, and timing functions configured programmatically per element.
  • Single JS File: Drop `dom-flowt.js` into any app with zero bundler CSS plugin setups.

Documentation & API Reference

Complete usage guides, HTML data attributes, and JS API reference.

1. Installation

Include the single JS file in your HTML document via CDN or install via package managers. No CSS link tag is needed!

Script Tag (Direct Browser Drop-In) 
<!-- Include dom-flowt v3 in your head or before </body> -->
<script src="https://cdn.jsdelivr.net/npm/dom-flowt@3/dist/dom-flowt.min.js"></script>

<script>
  // Initialize observer watching on DOM ready
  document.addEventListener("DOMContentLoaded", () => {
    DomFlowt.watch();
  });
</script>
2. Markup Markup Example 
<!-- Basic fade in -->
<div dom-flowt-is-visible="false" dom-flowt-type="fade">
  <h2>Fades in when scrolled into view</h2>
</div>

<!-- Float upward with custom bounce style & duration -->
<div dom-flowt-is-visible="false" dom-flowt-type="float" dom-flowt-style="up-bounce" dom-flowt-duration="800">
  <p>Floats up with bounce elasticity over 800ms</p>
</div>