Skip to content

README.md

Latest commit

 

History

History
182 lines (129 loc) · 5.28 KB

README.md

File metadata and controls

182 lines (129 loc) · 5.28 KB
Raw

Wix Motion

A comprehensive animation library featuring 82+ carefully crafted presets, designed for modern web applications, built on native browser technology.

✨ Features

  • Web Platform First - Built on native browser technology for smooth 60fps animations
  • 82+ Animation Presets - Professionally designed animations ready to use
  • 5 Animation Categories - Entrance, Ongoing, Scroll, Mouse, and Background Scroll effects
  • TypeScript Support - Complete type definitions with IntelliSense support
  • Dual Rendering - Both Web Animations API and CSS-based rendering
  • Scroll Integration - Advanced scroll-driven animations with ViewTimeline API support
  • Mouse Parallax - Interactive pointer-based animations
  • Performance Optimized - Uses fastdom to minimize layout thrashing

🚀 Quick Start

Installation

npm install @wix/motion

Basic Usage

import { getWebAnimation } from '@wix/motion';

// Create a fade-in entrance animation
const animation = getWebAnimation(document.getElementById('myElement'), {
  namedEffect: { type: 'FadeIn' },
  duration: 1000,
  easing: 'easeOut',
});

// Play the animation
await animation.play();

Scroll-Driven Animation

import { getScrubScene } from '@wix/motion';

// Create a scroll-driven parallax effect
const scene = getScrubScene(
  document.getElementById('scrollElement'),
  {
    namedEffect: {
      type: 'ParallaxScroll',
      speed: 0.5,
    },
  },
  { trigger: 'view-progress', element: document.getElementById('viewport') },
);

📚 Animation Categories

🎭 Entrance Animations (24 presets)

Perfect for element reveals and page transitions:

  • FadeIn - Simple opacity transition
  • ArcIn - Curved motion with 3D rotation
  • BounceIn - Spring-based entrance with bounce effect
  • SlideIn - Directional slides from off-screen
  • FlipIn - 3D flip transitions
  • See all entrance animations →

🔄 Ongoing Animations (16 presets)

Continuous looping animations for attention and delight:

  • Pulse - Rhythmic scaling effect
  • Breathe - Organic scaling animation
  • Spin - Smooth rotation loops
  • Wiggle - Playful shake motions
  • Float - Gentle floating movement
  • See all ongoing animations →

📜 Scroll Animations (19 presets)

Scroll-synchronized effects that respond to viewport position:

  • ParallaxScroll - Classic parallax movement
  • FadeScroll - Opacity changes on scroll
  • GrowScroll - Scale transformations
  • RevealScroll - Clip-path reveals
  • TiltScroll - 3D perspective tilting
  • See all scroll animations →

🖱️ Mouse Animations (12 presets)

Interactive pointer-driven effects:

  • TrackMouse - Element follows cursor
  • Tilt3DMouse - 3D tilt based on pointer position
  • ScaleMouse - Dynamic scaling on hover
  • BlurMouse - Motion blur effects
  • See all mouse animations →

🖼️ Background Scroll Animations (12 presets)

Specialized effects for background media elements:

  • BgParallax - Background parallax scrolling
  • BgZoom - Dynamic background scaling
  • BgFade - Background opacity transitions
  • BgRotate - Background rotation effects
  • See all background animations →

🛠️ Core APIs

Animation Creation

  • getWebAnimation() - Create Web Animations API instances
  • getScrubScene() - Generate scroll/pointer-driven scenes
  • prepareAnimation() - Pre-calculate measurements for performance

CSS Integration

  • CSS custom properties for dynamic values
  • CSS Animation API for stylesheet-based animations
  • Automatic vendor prefixing and fallbacks

TypeScript Support

Complete type definitions for all animation options:

interface TimeAnimationOptions {
  namedEffect: EntranceAnimation | OngoingAnimation;
  duration?: number;
  easing?: string;
  // ... more options
}

📖 Documentation

🎮 Interactive Playground

Explore animations interactively in our Storybook playground:

yarn start  # Opens interactive documentation

🔧 Framework Integration

Works seamlessly with popular frameworks:

  • React/Vue/Angular components
  • GSAP and Framer Motion compatibility
  • CSS-in-JS libraries
  • Server-side rendering support

🌐 Browser Support

  • Modern browsers with Web Animations API
  • Progressive enhancement with CSS fallbacks
  • ViewTimeline API for advanced scroll effects (with polyfill)

🤝 Contributing

This package is part of the Wix wow-libs monorepo. See contributing guidelines for development setup and contribution process.

📄 License

UNLICENSED - Internal Wix package

Built with ❤️ by the Wix wow!Team