@wix/wix-motion-presets

Ready-made animation presets extracted from @wix/motion for use with @wix/interact 2.x.

Overview

This package exposes ~80 animation presets as individual named exports across five categories:

| Category | Count | Trigger | Examples | | --- | --- | --- | --- | | Entrance | 23 | Time-based (viewport enter) | FadeIn, SlideIn, BounceIn | | Ongoing | 14 | Time-based (loop) | Pulse, Spin, Breathe | | Scroll | 19 | Scroll scrub | FadeScroll, ParallaxScroll, MoveScroll | | Mouse | 12 | Pointer move | TrackMouse, Tilt3DMouse, BlurMouse | | Background Scroll | 12 | Scroll scrub (background) | BgParallax, BgZoom, ImageParallax |

Each preset is a namespace object with web, getNames, style, and (where applicable) prepare members — the same shape expected by @wix/motion and @wix/interact.

Installation

yarn add @wix/wix-motion-presets @wix/motion

@wix/motion is a peer dependency (v2+). When using @wix/interact, register presets before creating interactions.

Usage

Bulk registration

import { Interact } from '@wix/interact';
import * as presets from '@wix/wix-motion-presets';

Interact.registerEffects(presets);

Selective registration (tree-shakeable)

import { Interact } from '@wix/interact';
import { FadeIn, SlideIn } from '@wix/wix-motion-presets';

Interact.registerEffects({ FadeIn, SlideIn });

Referencing in interact config

const config = {
  triggers: {
    hero: { type: 'viewEnter' },
  },
  effects: {
    fadeHero: {
      type: 'namedEffect',
      namedEffect: { type: 'FadeIn' },
      trigger: 'hero',
    },
  },
};

API shape

Every preset exports a namespace with:

• getNames(options) — CSS animation name(s) for the effect
• web(options) — keyframe data for Web Animations API
• style?(options) — keyframe data for CSS animations
• prepare?(target, options, dom) — pre-measurement hook (scroll/reveal effects)

Mouse presets export a default create factory (e.g. TrackMouse) registered as { TrackMouse }.

Development

cd packages/wix-motion-presets
yarn build   # yoshi-library build
yarn test    # yoshi-library test
yarn lint    # yoshi-library lint
yarn format  # yoshi-library lint --fix

Related packages

• @wix/motion — animation engine (WAAPI, CSS, View Timeline)
• @wix/interact — declarative trigger → effect binding

License

UNLICENSED