+ Use generateCSS() to pre-render animation CSS for SSR or efficient CSR. The
+ animations run as pure CSS when enabled, reducing JavaScript overhead.
+
+
+
+
+
+
+
Card 1 - Fade Slide Up
+
Entrance Animation
+
+ This card uses the default initial to set visibility to hidden and
+ transform to none before the viewEnter animation triggers to enable intersection.
+
+
+
+
+
+
+
Card 2 - Scale Fade In
+
Delayed Start
+
+ Custom initial on this card setting the opacity property ensures the card
+ starts transparent and invisible.
+
+
+
+
+
+
+
Card 3 - Blur Reveal
+
Complex Initial State
+
+ When initial is set to false, the first frame of the animation is set and
+ might affect intersection.
+
+
+
+
+
+
+
+
+
+
+
+ {showCSS && (
+
+
Generated CSS Output
+
{generatedCSS || '/* No CSS generated */'}
+
+ )}
+
+ );
+};
diff --git a/apps/demo/src/web/App.tsx b/apps/demo/src/web/App.tsx
index bf456e85..94eec1fd 100644
--- a/apps/demo/src/web/App.tsx
+++ b/apps/demo/src/web/App.tsx
@@ -2,6 +2,7 @@ import { Playground } from './components/Playground';
import { ScrollShowcase } from './components/ScrollShowcase';
import { ResponsiveDemo } from './components/ResponsiveDemo';
import { SelectorConditionDemo } from './components/SelectorConditionDemo';
+import { CSSGenerationDemo } from './components/CSSGenerationDemo';
import { PointerMoveDemo } from './components/PointerMoveDemo';
const heroCopy = [
@@ -35,6 +36,7 @@ function App() {
+
+ Use generateCSS() to pre-render animation CSS for SSR or efficient CSR. The
+ animations run as pure CSS when enabled, reducing JavaScript overhead.
+
+
+
+
+
+
+
Card 1 - Fade Slide Up
+
Entrance Animation
+
+ This card uses the default initial to set visibility to hidden and
+ transform to none before the viewEnter animation triggers to enable intersection.
+
+
+
+
+
+
+
Card 2 - Scale Fade In
+
Delayed Start
+
+ Custom initial on this card setting the opacity property ensures the card
+ starts transparent and invisible.
+
+
+
+
+
+
+
Card 3 - Blur Reveal
+
Complex Initial State
+
+ When initial is set to false, the first frame of the animation is set and
+ might affect intersection.
+
+
+
+
+
+
+
+
+
+
+
+ {showCSS && (
+
+
Generated CSS Output
+
{generatedCSS || '/* No CSS generated */'}
+
+ )}
+
+ );
+};
diff --git a/packages/interact/docs/api/functions.md b/packages/interact/docs/api/functions.md
index ea3dd01d..782f5d4d 100644
--- a/packages/interact/docs/api/functions.md
+++ b/packages/interact/docs/api/functions.md
@@ -330,6 +330,352 @@ For the generated CSS to work, the `` must have the `data-inte
---
+## `generateCSS(config)`
+
+Generates complete CSS for time-based animations from an `InteractConfig`. This function is designed for **Server-Side Rendering (SSR)** or **efficient Client-Side Rendering (CSR)** by pre-generating CSS animations that can be rendered in a `
+
+
+