move.gl is a comprehensive motion and animation library designed to bring life to your web applications. It provides both SCSS mixins for CSS-based animations and TypeScript classes for interactive JavaScript-driven animations.
- Animation Mixins: Bounce, fade, slide, zoom, flip, rotate, pulse, and more
- Transform Mixins: Scale, rotate, translate, skew, perspective, matrix operations
- Transition Mixins: Smooth property transitions with customizable timing
- Effect Mixins: Shadows, opacity, filters (blur, brightness, contrast, etc.)
- Mouse Interactions: Hover effects, cursor styles, scroll behaviors
- Loaders: Spinners, progress indicators, and loading animations
- Accessibility: Respects
prefers-reduced-motionsettings
- Draggable: Make any element draggable with mouse/touch support
- Gesture: Touch gesture handling (tap, swipe, pinch, rotate)
- Keyboard: Virtual keyboard with multiple layout support
- Screensaver: Inactivity-triggered screensaver with video/audio
- VideoOverlay: Transparent video overlay with fade effects
npm install move.gl@use'move.gl'asmove;
.my-element {
@includemove.animate-bounce;
}
.fade-in {
@includemove.animate-fade-in(0.5s, ease-in-out);
}
.hover-scale {
@includemove.hover-scale(1.1);
}import{Draggable,TouchGestureHandler,Screensaver}from'move.gl';// Make an element draggableconstdraggable=newDraggable('myElement');// Handle touch gesturesconstgesture=newTouchGestureHandler('gestureArea',{onSwipe: (direction,dx,dy)=>console.log(`Swiped ${direction}`),onPinch: (scale)=>console.log(`Pinch scale: ${scale}`)});// Create a screensaverconstscreensaver=newScreensaver({videoUrl: 'screensaver.mp4',inactivityTimeout: 300000// 5 minutes});| Mixin | Description |
|---|---|
animate-bounce | Bouncing animation |
animate-fade-in/out | Fade in/out animations |
animate-slide-in/out | Slide in/out from any direction |
animate-zoom-in/out | Zoom in/out effects |
animate-pulse | Pulsing animation |
animate-shake | Shake animation |
animate-flip | 3D flip animation |
animate-rotate | Rotation animation |
| Mixin | Description |
|---|---|
scale($factor) | Scale transform |
rotate($angle) | Rotation transform |
translate($x, $y) | Translation transform |
skew($x, $y) | Skew transform |
perspective($distance) | 3D perspective |
| Mixin | Description |
|---|---|
shadow($params) | Box shadow |
opacity($value) | Opacity with transitions |
blur($amount) | Blur filter |
brightness($amount) | Brightness filter |
contrast($amount) | Contrast filter |
grayscale($amount) | Grayscale filter |
constdraggable=newDraggable(elementId: string);draggable.destroy();// Clean upconsthandler=newTouchGestureHandler(elementId: string,{onTap?: ()=>void,onSwipe?: (direction: SwipeDirection,dx: number,dy: number)=>void,onPinch?: (scale: number)=>void,onRotate?: (angle: number)=>void});handler.destroy();// Clean upconstscreensaver=newScreensaver({videoUrl?: string,audioUrl?: string,inactivityTimeout?: number,fadeInDuration?: number,fadeOutDuration?: number});screensaver.start();screensaver.stop();screensaver.destroy();- Chrome 88+
- Firefox 78+
- Safari 14+
- Edge 88+
- iOS Safari 14+
- Chrome for Android 88+
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Run tests
npm testContributions are welcome! Please read our Contributing Guidelines before submitting a pull request.
This project is licensed under the MIT License - see the LICENSE file for details.
Made with ❤️ by Scape Press