# @wix/interact Integration Rules Rules for integrating `@wix/interact` into a webpage — binding animations and effects to user-driven triggers via declarative configuration. ## Table of Contents - [Entry Points](#entry-points) - [Web (Custom Elements)](#web-custom-elements) - [React](#react) - [Vanilla JS](#vanilla-js) - [Named Effects & registerEffects](#named-effects--registereffects) - [Configuration Schema](#configuration-schema) - [InteractConfig](#interactconfig) - [Interaction](#interaction) - [Element Selection](#element-selection) - [Triggers](#triggers) - [Sequences](#sequences) - [CSS Generation & FOUC Prevention](#css-generation--fouc-prevention) - [Static API](#static-api) --- ## Entry Points Install with your package manager: ```bash npm install @wix/interact @wix/motion-presets ``` ### Web (Custom Elements) ```typescript import { Interact, generate } from '@wix/interact/web'; import { FadeIn } from '@wix/motion-presets'; Interact.registerEffects({ FadeIn }); const css = generate(config, true); // useFirstChild = true for web // Embed css in HTML — see CSS Generation & FOUC Prevention Interact.create(config); ``` The `config` object contains `interactions` (trigger-effect bindings), and optionally `effects`, `sequences`, and `conditions`. See [Configuration Schema](#configuration-schema) for full details. Wrap target elements with ``: ```html

...

``` **Rules:** - MUST set `data-interact-key` to a unique string within the page. - MUST contain at least one child element (the library targets `.firstElementChild` by default). ### React - Call `generate(config, false)` during SSR/build and embed the CSS in document `` (` … ``` ### FOUC Prevention (viewEnter + once) **Problem:** Elements with entrance animations (e.g. `FadeIn` on `viewEnter`) are initially visible in their final state. Before the animation framework applies the starting keyframe, the content flashes visibly — a flash of un-animated content (FOUC). **Solution:** Call `generate(config, useFirstChild)` at build/generation time and embed the resulting CSS before first paint. The generated initial rules hide entrance-animated elements until the animation starts. See [viewenter.md](./viewenter.md) for full details. **Rules:** - For static/pre-rendered sites, prefer generating all possible CSS at build/generation time. Split runtime-dependent interactions into a separate config where practical, or fall back to generating the full config at runtime. - Inject runtime-generated CSS before the corresponding `Interact.create()` call and before revealing initially hidden content to minimize FOUC. - `generate()` processes all interactions, not just `viewEnter`. - FOUC initial rules apply only to `viewEnter` + `triggerType: 'once'` (or no `triggerType`, which defaults to `'once'`) where source and target are the same element. --- ## Static API Each `Interact.create(config)` call returns an instance. Keep a reference if you need to add/remove elements dynamically (vanilla JS) or to destroy a specific instance. Call `Interact.destroy()` to tear down all instances at once (e.g. on page navigation). | Method / Property | Description | | :---------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `generate(config, options?)` | Produce complete CSS for all interactions. Call at build/generation time; embed in HTML. `options` = `{ useFirstChild?, plugins? }`, or a bare boolean for legacy `useFirstChild`. | | `Interact.create(config)` | Initialize with a config. Returns the instance. Multiple configs create separate instances. | | `Interact.registerEffects(presets)` | Register named effect presets before `generate()` and `create`. Required for `namedEffect`. | | `Interact.destroy()` | Tear down all instances. | | `Interact.forceReducedMotion` | `boolean` — force reduced-motion behavior regardless of OS setting. Default: `false`. | | `Interact.allowA11yTriggers` | `boolean` — enable accessibility triggers (`interest`, `activate`). Default: `true`. | | `Interact.setup(options)` | Configure global defaults for scroll/pointer/viewEnter trigger params. Call before `create`. |