@wix/motion-presets

Ready-made animation presets for @wix/motion — entrance, scroll, pointer, loop, and background effects.

What's Included

62 ready-made animation presets across 4 categories:

| Category | Count | Description | | --------------------- | ----- | ---------------------------------------------- | | Entrance | 19 | Play once when an element enters the viewport | | Scroll | 19 | Progress tied to the element's scroll position | | Ongoing | 13 | Continuous looping animations | | Mouse | 11 | Real-time response to cursor position |

Install

npm install @wix/motion-presets

@wix/motion is included as a dependency — no separate install needed.

Quick Start — Registration

Presets are passive modules. Register them with registerEffects() from @wix/motion before calling getWebAnimation(), getScrubScene(), or generate().

Register all presets

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

registerEffects(presets);

Register selectively

Import only the presets you use to keep your bundle smaller:

import { registerEffects } from '@wix/motion';
import { FadeIn, SlideIn, ParallaxScroll } from '@wix/motion-presets';

registerEffects({ FadeIn, SlideIn, ParallaxScroll });

Usage with @wix/interact

Pass a namedEffect to any effect in an @wix/interact config. Call registerEffects() before generate() and Interact.create().

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

Interact.registerEffects(presets);

const config = {
  interactions: [
    {
      key: 'hero',
      trigger: 'viewEnter',
      effects: [{ effectId: 'fade-in' }],
    },
  ],
  effects: {
    'fade-in': {
      duration: 800,
      easing: 'ease-out',
      namedEffect: { type: 'FadeIn' },
      triggerType: 'once',
    },
  },
};

const css = generate(config, true);
const instance = Interact.create(config);

Usage with @wix/motion

Time-based entrance

import { getWebAnimation, registerEffects } from '@wix/motion';
import * as presets from '@wix/motion-presets';

registerEffects(presets);

const animation = getWebAnimation(document.getElementById('hero'), {
  namedEffect: { type: 'FadeIn' },
  duration: 800,
  easing: 'ease-out',
});

animation.play();

Scroll-driven

import { getScrubScene, registerEffects } from '@wix/motion';
import * as presets from '@wix/motion-presets';

registerEffects(presets);

const scrollRoot = document.getElementById('scroll-root')!;

const scenes = getScrubScene(
  document.getElementById('card'),
  {
    namedEffect: { type: 'FadeScroll' },
    startOffset: { name: 'cover', offset: { value: 0, unit: 'percentage' } },
    endOffset: { name: 'cover', offset: { value: 100, unit: 'percentage' } },
    fill: 'both',
    easing: 'linear',
  },
  { trigger: 'view-progress', element: scrollRoot },
);

Preset Categories

Entrance

Animations optimized for when an element enters the viewport. Used with the viewEnter trigger (intersection observer), but can be wired to any trigger.

Presets (19): ArcIn, BlurIn, BounceIn, CurveIn, DropIn, ExpandIn, FadeIn, FlipIn, FloatIn, FoldIn, GlideIn, RevealIn, ShapeIn, ShuttersIn, SlideIn, SpinIn, TiltIn, TurnIn, WinkIn

→ Entrance Preset Reference

Scroll

Animations driven by an element's scroll progress through the viewport via ViewTimeline. Used with the viewProgress trigger.

Presets (19): ArcScroll, BlurScroll, FadeScroll, FlipScroll, GrowScroll, MoveScroll, PanScroll, ParallaxScroll, RevealScroll, ShapeScroll, ShrinkScroll, ShuttersScroll, SkewPanScroll, SlideScroll, Spin3dScroll, SpinScroll, StretchScroll, TiltScroll, TurnScroll

→ Scroll Preset Reference

Ongoing

Continuous looping animations that run indefinitely until stopped. Used with any trigger — typically viewEnter or hover.

Presets (13): Bounce, Breathe, Cross, Flash, Flip, Fold, Jello, Poke, Pulse, Rubber, Spin, Swing, Wiggle

→ Ongoing Preset Reference

Mouse

Animations driven by pointer position in real time. Transform values respond to the cursor's (x, y) coordinates. Used with the pointerMove trigger.

Mouse presets may behave differently on touch devices.

Presets (11): AiryMouse, BlobMouse, BlurMouse, BounceMouse, ScaleMouse, SkewMouse, SpinMouse, SwivelMouse, Tilt3DMouse, Track3DMouse, TrackMouse

→ Mouse Preset Reference

Choosing a Preset

| Intent | Category | Example Presets | | ---------------------------- | -------- | -------------------------------------- | | Reveal content on scroll | Entrance | FadeIn, SlideIn, FloatIn | | Animate through the viewport | Scroll | FadeScroll, ParallaxScroll, MoveScroll | | Draw continuous attention | Ongoing | Pulse, Breathe, Wiggle | | Respond to cursor position | Mouse | TrackMouse, Tilt3DMouse, BlurMouse |

For selection by tone and atmosphere (playful, elegant, bold, soft, dramatic, modern, etc.), see the Selection by Atmosphere guide.

Parameter Conventions

direction

The direction parameter accepts different value sets depending on the preset:

| Values | Example Presets | | ---------------------------------------- | ----------------------------------------------------------------------- | | 'top' \| 'right' \| 'bottom' \| 'left' | SlideIn, FloatIn, FlipIn, FoldIn | | 'horizontal' \| 'vertical' | WinkIn, ArcScroll, FlipScroll, Flip | | 'clockwise' \| 'counter-clockwise' | SpinIn, SpinScroll, Spin | | 0–360 (degrees, number) | GlideIn, ExpandIn, MoveScroll | | Corner values | TurnIn ('top-left', 'top-right', 'bottom-left', 'bottom-right') |

Angle convention: 0° = right (east), angles increase counter-clockwise.

Distance units

Prefer the { value, unit } object notation:

namedEffect: {
  type: 'GlideIn',
  distance: { value: 120, unit: 'px' },
}

Supported units: px, em, rem, vh, vw, vmin, vmax, percentage.

iterationDelay (ongoing only)

Adds an idle pause between loop cycles. Set on the namedEffect:

namedEffect: { type: 'Bounce', iterationDelay: 1000 } // 1 s pause after each cycle

Available on all ongoing presets.

For full parameter standards and the coordinate system reference, see Parameter Standards in presets-main.md.

Accessibility

Interact's conditions system lets you define media-query gates. Define a condition for (prefers-reduced-motion: reduce) and attach it to interactions or effects that use high-risk presets — when the query matches, those effects are skipped or replaced with safer alternatives.

See Accessibility in presets-main.md for full guidance and LLM principles.

Preset risk levels

| Risk | Presets | | ---------- | --------------------------------------------------------------------------------------------------------------------- | | High | SpinIn, Spin, BounceIn, Bounce, ArcIn, ArcScroll, FlipIn, FlipScroll, Spin3dScroll, Tilt3DMouse, Flash, Jello, Wiggle | | Medium | TurnIn, ParallaxScroll (at high speed values) | | Low / safe | FadeIn, FadeScroll, BlurIn, BlurScroll, Pulse, Breathe |

Reduced-motion fallbacks (subset)

| Original | Fallback | | --------------------- | ------------------------- | | BounceIn, SpinIn | FadeIn | | ArcIn, FlipIn, TurnIn | FadeIn | | Spin, Bounce, Wiggle | Stop or subtle Pulse | | Flash | Reduce frequency (<3/sec) | | ParallaxScroll | Static position | | All mouse presets | Static state |

AI & Agent Support

Rules files ship with the package under rules/presets/ — point your agent at them:

| File | Contents | | ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------- | | presets-main.md | Overview, parameter standards, atmosphere guide, accessibility | | entrance-presets.md | Entrance preset parameters and defaults | | scroll-presets.md | Scroll preset parameters and defaults | | ongoing-presets.md | Ongoing preset parameters and defaults | | mouse-presets.md | Mouse preset parameters and defaults |

Generation constraints for agents:

• Use only the preset names listed in this README as namedEffect.type values — do not invent types.
• When uncertain about a preset's parameters, omit them — the defaults will apply.
• Always call registerEffects() before generate() and Interact.create() (or before getWebAnimation()/getScrubScene()) when using namedEffect.
• Presets are JSON-serializable config objects.

Related Packages

• @wix/motion — the animation engine; provides registerEffects(), getWebAnimation(), and getScrubScene()
• @wix/interact — declarative interaction layer; the recommended way to use presets in production

License

MIT