@wix/motion 1.601.0 → 1.602.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,3 +1,171 @@
|
|
|
1
1
|
# Wix Motion
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A comprehensive animation library featuring 82+ carefully crafted presets, designed for modern web applications, built on native browser technology.
|
|
4
|
+
|
|
5
|
+
## ✨ Features
|
|
6
|
+
|
|
7
|
+
- **Web Platform First** - Built on native browser technology for smooth 60fps animations
|
|
8
|
+
- **82+ Animation Presets** - Professionally designed animations ready to use
|
|
9
|
+
- **5 Animation Categories** - Entrance, Ongoing, Scroll, Mouse, and Background Scroll effects
|
|
10
|
+
- **TypeScript Support** - Complete type definitions with IntelliSense support
|
|
11
|
+
- **Dual Rendering** - Both Web Animations API and CSS-based rendering
|
|
12
|
+
- **Scroll Integration** - Advanced scroll-driven animations with ViewTimeline API support
|
|
13
|
+
- **Mouse Parallax** - Interactive pointer-based animations
|
|
14
|
+
- **Performance Optimized** - Uses fastdom to minimize layout thrashing
|
|
15
|
+
|
|
16
|
+
## 🚀 Quick Start
|
|
17
|
+
|
|
18
|
+
### Installation
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
npm install @wix/motion
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
### Basic Usage
|
|
25
|
+
|
|
26
|
+
```typescript
|
|
27
|
+
import { getWebAnimation } from '@wix/motion';
|
|
28
|
+
|
|
29
|
+
// Create a fade-in entrance animation
|
|
30
|
+
const animation = getWebAnimation(
|
|
31
|
+
document.getElementById('myElement'),
|
|
32
|
+
{
|
|
33
|
+
type: 'TimeAnimationOptions',
|
|
34
|
+
namedEffect: { type: 'FadeIn' },
|
|
35
|
+
duration: 1000,
|
|
36
|
+
easing: 'easeOut'
|
|
37
|
+
}
|
|
38
|
+
);
|
|
39
|
+
|
|
40
|
+
// Play the animation
|
|
41
|
+
await animation.play();
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### Scroll-Driven Animation
|
|
45
|
+
|
|
46
|
+
```typescript
|
|
47
|
+
import { getScrubScene } from '@wix/motion';
|
|
48
|
+
|
|
49
|
+
// Create a scroll-driven parallax effect
|
|
50
|
+
const scene = getScrubScene(
|
|
51
|
+
document.getElementById('scrollElement'),
|
|
52
|
+
{
|
|
53
|
+
type: 'ScrubAnimationOptions',
|
|
54
|
+
namedEffect: {
|
|
55
|
+
type: 'ParallaxScroll',
|
|
56
|
+
speed: 0.5
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
{ trigger: 'view-progress', element: document.getElementById('viewport') }
|
|
60
|
+
);
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## 📚 Animation Categories
|
|
64
|
+
|
|
65
|
+
### 🎭 Entrance Animations (24 presets)
|
|
66
|
+
Perfect for element reveals and page transitions:
|
|
67
|
+
- **FadeIn** - Simple opacity transition
|
|
68
|
+
- **ArcIn** - Curved motion with 3D rotation
|
|
69
|
+
- **BounceIn** - Spring-based entrance with bounce effect
|
|
70
|
+
- **SlideIn** - Directional slides from off-screen
|
|
71
|
+
- **FlipIn** - 3D flip transitions
|
|
72
|
+
- [See all entrance animations →](docs/categories/entrance-animations.md)
|
|
73
|
+
|
|
74
|
+
### 🔄 Ongoing Animations (16 presets)
|
|
75
|
+
Continuous looping animations for attention and delight:
|
|
76
|
+
- **Pulse** - Rhythmic scaling effect
|
|
77
|
+
- **Breathe** - Organic scaling animation
|
|
78
|
+
- **Spin** - Smooth rotation loops
|
|
79
|
+
- **Wiggle** - Playful shake motions
|
|
80
|
+
- **Float** - Gentle floating movement
|
|
81
|
+
- [See all ongoing animations →](docs/categories/ongoing-animations.md)
|
|
82
|
+
|
|
83
|
+
### 📜 Scroll Animations (19 presets)
|
|
84
|
+
Scroll-synchronized effects that respond to viewport position:
|
|
85
|
+
- **ParallaxScroll** - Classic parallax movement
|
|
86
|
+
- **FadeScroll** - Opacity changes on scroll
|
|
87
|
+
- **GrowScroll** - Scale transformations
|
|
88
|
+
- **RevealScroll** - Clip-path reveals
|
|
89
|
+
- **TiltScroll** - 3D perspective tilting
|
|
90
|
+
- [See all scroll animations →](docs/categories/scroll-animations.md)
|
|
91
|
+
|
|
92
|
+
### 🖱️ Mouse Animations (12 presets)
|
|
93
|
+
Interactive pointer-driven effects:
|
|
94
|
+
- **TrackMouse** - Element follows cursor
|
|
95
|
+
- **Tilt3DMouse** - 3D tilt based on pointer position
|
|
96
|
+
- **ScaleMouse** - Dynamic scaling on hover
|
|
97
|
+
- **BlurMouse** - Motion blur effects
|
|
98
|
+
- [See all mouse animations →](docs/categories/mouse-animations.md)
|
|
99
|
+
|
|
100
|
+
### 🖼️ Background Scroll Animations (12 presets)
|
|
101
|
+
Specialized effects for background media elements:
|
|
102
|
+
- **BgParallax** - Background parallax scrolling
|
|
103
|
+
- **BgZoom** - Dynamic background scaling
|
|
104
|
+
- **BgFade** - Background opacity transitions
|
|
105
|
+
- **BgRotate** - Background rotation effects
|
|
106
|
+
- [See all background animations →](docs/categories/background-scroll-animations.md)
|
|
107
|
+
|
|
108
|
+
## 🛠️ Core APIs
|
|
109
|
+
|
|
110
|
+
### Animation Creation
|
|
111
|
+
- `getWebAnimation()` - Create Web Animations API instances
|
|
112
|
+
- `getScrubScene()` - Generate scroll/pointer-driven scenes
|
|
113
|
+
- `prepareAnimation()` - Pre-calculate measurements for performance
|
|
114
|
+
|
|
115
|
+
### CSS Integration
|
|
116
|
+
- CSS custom properties for dynamic values
|
|
117
|
+
- CSS Animation API for stylesheet-based animations
|
|
118
|
+
- Automatic vendor prefixing and fallbacks
|
|
119
|
+
|
|
120
|
+
### TypeScript Support
|
|
121
|
+
Complete type definitions for all animation options:
|
|
122
|
+
```typescript
|
|
123
|
+
interface TimeAnimationOptions {
|
|
124
|
+
namedEffect: EntranceAnimation | OngoingAnimation;
|
|
125
|
+
duration?: number;
|
|
126
|
+
easing?: string;
|
|
127
|
+
// ... more options
|
|
128
|
+
}
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
## 📖 Documentation
|
|
132
|
+
|
|
133
|
+
- **[Getting Started](docs/getting-started.md)** - Setup and first animation
|
|
134
|
+
- **[Core Concepts](docs/core-concepts.md)** - Understanding the animation system
|
|
135
|
+
- **[API Reference](docs/api/)** - Complete function documentation
|
|
136
|
+
- **[Category Guides](docs/categories/)** - Detailed category overviews
|
|
137
|
+
- **[Preset Reference](docs/presets/)** - Individual animation documentation
|
|
138
|
+
- **[Advanced Usage](docs/guides/)** - Performance tips and patterns
|
|
139
|
+
|
|
140
|
+
## 🎮 Interactive Playground
|
|
141
|
+
|
|
142
|
+
Explore animations interactively in our Storybook playground:
|
|
143
|
+
```bash
|
|
144
|
+
yarn start # Opens interactive documentation
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
## 🔧 Framework Integration
|
|
148
|
+
|
|
149
|
+
Works seamlessly with popular frameworks:
|
|
150
|
+
- React/Vue/Angular components
|
|
151
|
+
- GSAP and Framer Motion compatibility
|
|
152
|
+
- CSS-in-JS libraries
|
|
153
|
+
- Server-side rendering support
|
|
154
|
+
|
|
155
|
+
## 🌐 Browser Support
|
|
156
|
+
|
|
157
|
+
- **Modern browsers** with Web Animations API
|
|
158
|
+
- **Progressive enhancement** with CSS fallbacks
|
|
159
|
+
- **ViewTimeline API** for advanced scroll effects (with polyfill)
|
|
160
|
+
|
|
161
|
+
## 🤝 Contributing
|
|
162
|
+
|
|
163
|
+
This package is part of the Wix wow-libs monorepo. See [contributing guidelines](../../CONTRIBUTING.md) for development setup and contribution process.
|
|
164
|
+
|
|
165
|
+
## 📄 License
|
|
166
|
+
|
|
167
|
+
UNLICENSED - Internal Wix package
|
|
168
|
+
|
|
169
|
+
---
|
|
170
|
+
|
|
171
|
+
**Built with ❤️ by the Wix wow!Team**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_utils","require","_easings","_CustomMouse","paramsMap","soft","angle","scale","easing","medium","hard","BlurMouseAnimation","CustomMouse","progress","x","progressX","y","progressY","distance","invert","blur","perspective","options","translateX","mapRange","value","translateY","scaleX","scaleY","maxScale","Math","min","rotateX","rotateY","units","getCssUnits","type","transform","progressDistance","distance2d","blurFilter","round","quadInOut","filter","target","style","cancel","transition","create","transitionDuration","transitionEasing","power","inverted","namedEffect","animationOptions","getMouseTransitionEasing"],"sources":["../../../../src/library/mouse/BlurMouse.ts"],"sourcesContent":["import {\n getCssUnits,\n getMouseTransitionEasing,\n distance2d,\n mapRange,\n} from '../../utils';\nimport { quadInOut } from '../../easings';\nimport { CustomMouse } from './CustomMouse';\nimport {\n ScrubAnimationOptions,\n AnimationExtraOptions,\n BlurMouse,\n Progress,\n EffectPower,\n ScrubTransitionEasing,\n} from '../../types';\n\nconst paramsMap: Record<\n EffectPower,\n { angle: number; scale: number; easing: ScrubTransitionEasing }\n> = {\n soft: { angle: 0, scale: 1, easing: 'easeOut' },\n medium: { angle: 25, scale: 0.7, easing: 'easeOut' },\n hard: { angle: 65, scale: 0.25, easing: 'easeOut' },\n};\nclass BlurMouseAnimation extends CustomMouse {\n progress({ x: progressX, y: progressY }: Progress) {\n const { distance, angle, scale, invert, blur, perspective } = this.options;\n\n const translateX =\n mapRange(0, 1, -distance.value, distance.value, progressX) * invert;\n const translateY =\n mapRange(0, 1, -distance.value, distance.value, progressY) * invert;\n\n // if progressX === 0 || progressX === 1, scaleX === scale, if progressX === 0.5, scaleX === 1\n const scaleX =\n progressX < 0.5\n ? mapRange(0, 0.5, scale, 1, progressX)\n : mapRange(0.5, 1, 1, scale, progressX);\n\n // if progressY === 0 || progressY === 1, scaleY === scale, if progressY === 0.5, scaleY === 1\n const scaleY =\n progressY < 0.5\n ? mapRange(0, 0.5, scale, 1, progressY)\n : mapRange(0.5, 1, 1, scale, progressY);\n\n const maxScale = Math.min(scaleX, scaleY);\n\n // if progressX === 0, rotateX === -angle, if progressX === 0.5, rotateX === 0, if progressX === 1, rotateX === angle\n const rotateX = mapRange(0, 1, -angle, angle, progressY) * invert;\n const rotateY = mapRange(0, 1, angle, -angle, progressX) * invert;\n\n const units = getCssUnits(distance.type);\n\n const transform = `perspective(${perspective}px) translateX(${translateX}${units}) translateY(${translateY}${units}) scale(${maxScale}, ${maxScale}) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotate(var(--comp-rotate-z, 0deg))`;\n\n const progressDistance = distance2d(
|
|
1
|
+
{"version":3,"names":["_utils","require","_easings","_CustomMouse","paramsMap","soft","angle","scale","easing","medium","hard","BlurMouseAnimation","CustomMouse","progress","x","progressX","y","progressY","distance","invert","blur","perspective","options","translateX","mapRange","value","translateY","scaleX","scaleY","maxScale","Math","min","rotateX","rotateY","units","getCssUnits","type","transform","progressDistance","distance2d","blurFilter","round","quadInOut","filter","target","style","cancel","transition","create","transitionDuration","transitionEasing","power","inverted","namedEffect","animationOptions","getMouseTransitionEasing"],"sources":["../../../../src/library/mouse/BlurMouse.ts"],"sourcesContent":["import {\n getCssUnits,\n getMouseTransitionEasing,\n distance2d,\n mapRange,\n} from '../../utils';\nimport { quadInOut } from '../../easings';\nimport { CustomMouse } from './CustomMouse';\nimport {\n ScrubAnimationOptions,\n AnimationExtraOptions,\n BlurMouse,\n Progress,\n EffectPower,\n ScrubTransitionEasing,\n} from '../../types';\n\nconst paramsMap: Record<\n EffectPower,\n { angle: number; scale: number; easing: ScrubTransitionEasing }\n> = {\n soft: { angle: 0, scale: 1, easing: 'easeOut' },\n medium: { angle: 25, scale: 0.7, easing: 'easeOut' },\n hard: { angle: 65, scale: 0.25, easing: 'easeOut' },\n};\nclass BlurMouseAnimation extends CustomMouse {\n progress({ x: progressX, y: progressY }: Progress) {\n const { distance, angle, scale, invert, blur, perspective } = this.options;\n\n const translateX =\n mapRange(0, 1, -distance.value, distance.value, progressX) * invert;\n const translateY =\n mapRange(0, 1, -distance.value, distance.value, progressY) * invert;\n\n // if progressX === 0 || progressX === 1, scaleX === scale, if progressX === 0.5, scaleX === 1\n const scaleX =\n progressX < 0.5\n ? mapRange(0, 0.5, scale, 1, progressX)\n : mapRange(0.5, 1, 1, scale, progressX);\n\n // if progressY === 0 || progressY === 1, scaleY === scale, if progressY === 0.5, scaleY === 1\n const scaleY =\n progressY < 0.5\n ? mapRange(0, 0.5, scale, 1, progressY)\n : mapRange(0.5, 1, 1, scale, progressY);\n\n const maxScale = Math.min(scaleX, scaleY);\n\n // if progressX === 0, rotateX === -angle, if progressX === 0.5, rotateX === 0, if progressX === 1, rotateX === angle\n const rotateX = mapRange(0, 1, -angle, angle, progressY) * invert;\n const rotateY = mapRange(0, 1, angle, -angle, progressX) * invert;\n\n const units = getCssUnits(distance.type);\n\n const transform = `perspective(${perspective}px) translateX(${translateX}${units}) translateY(${translateY}${units}) scale(${maxScale}, ${maxScale}) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotate(var(--comp-rotate-z, 0deg))`;\n\n const progressDistance = distance2d([0.5, 0.5], [progressX, progressY]);\n const blurFilter = Math.round(\n mapRange(0, 1, 0, blur, quadInOut(progressDistance)),\n );\n\n const filter = `blur(${blurFilter}px)`;\n\n this.target.style.transform = transform;\n this.target.style.filter = filter;\n }\n\n cancel() {\n this.target.style.transform = '';\n this.target.style.filter = '';\n this.target.style.transition = '';\n }\n}\n\nexport default function create(\n options: ScrubAnimationOptions & AnimationExtraOptions,\n) {\n const { transitionDuration, transitionEasing } = options;\n const {\n power,\n inverted = false,\n distance = { value: 80, type: 'px' },\n angle = 5,\n scale = 0.3,\n blur = 20,\n perspective = 600,\n } = options.namedEffect as BlurMouse;\n const invert = inverted ? -1 : 1;\n const animationOptions = {\n transition: transitionDuration\n ? `transform ${transitionDuration}ms ${getMouseTransitionEasing(\n power ? paramsMap[power].easing : transitionEasing,\n )}, filter ${transitionDuration}ms ${getMouseTransitionEasing(\n power ? paramsMap[power].easing : transitionEasing,\n )}`\n : '',\n distance,\n angle: power ? paramsMap[power].angle : angle,\n scale: power ? paramsMap[power].scale : scale,\n blur,\n perspective,\n invert,\n };\n\n return (target: HTMLElement) =>\n new BlurMouseAnimation(target, animationOptions);\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getCssUnits","getMouseTransitionEasing","distance2d","mapRange","quadInOut","CustomMouse","paramsMap","soft","angle","scale","easing","medium","hard","BlurMouseAnimation","progress","_ref","x","progressX","y","progressY","distance","invert","blur","perspective","options","translateX","value","translateY","scaleX","scaleY","maxScale","Math","min","rotateX","rotateY","units","type","transform","progressDistance","blurFilter","round","filter","target","style","cancel","transition","create","transitionDuration","transitionEasing","power","inverted","namedEffect","animationOptions"],"sources":["../../../../src/library/mouse/BlurMouse.ts"],"sourcesContent":["import {\n getCssUnits,\n getMouseTransitionEasing,\n distance2d,\n mapRange,\n} from '../../utils';\nimport { quadInOut } from '../../easings';\nimport { CustomMouse } from './CustomMouse';\nimport {\n ScrubAnimationOptions,\n AnimationExtraOptions,\n BlurMouse,\n Progress,\n EffectPower,\n ScrubTransitionEasing,\n} from '../../types';\n\nconst paramsMap: Record<\n EffectPower,\n { angle: number; scale: number; easing: ScrubTransitionEasing }\n> = {\n soft: { angle: 0, scale: 1, easing: 'easeOut' },\n medium: { angle: 25, scale: 0.7, easing: 'easeOut' },\n hard: { angle: 65, scale: 0.25, easing: 'easeOut' },\n};\nclass BlurMouseAnimation extends CustomMouse {\n progress({ x: progressX, y: progressY }: Progress) {\n const { distance, angle, scale, invert, blur, perspective } = this.options;\n\n const translateX =\n mapRange(0, 1, -distance.value, distance.value, progressX) * invert;\n const translateY =\n mapRange(0, 1, -distance.value, distance.value, progressY) * invert;\n\n // if progressX === 0 || progressX === 1, scaleX === scale, if progressX === 0.5, scaleX === 1\n const scaleX =\n progressX < 0.5\n ? mapRange(0, 0.5, scale, 1, progressX)\n : mapRange(0.5, 1, 1, scale, progressX);\n\n // if progressY === 0 || progressY === 1, scaleY === scale, if progressY === 0.5, scaleY === 1\n const scaleY =\n progressY < 0.5\n ? mapRange(0, 0.5, scale, 1, progressY)\n : mapRange(0.5, 1, 1, scale, progressY);\n\n const maxScale = Math.min(scaleX, scaleY);\n\n // if progressX === 0, rotateX === -angle, if progressX === 0.5, rotateX === 0, if progressX === 1, rotateX === angle\n const rotateX = mapRange(0, 1, -angle, angle, progressY) * invert;\n const rotateY = mapRange(0, 1, angle, -angle, progressX) * invert;\n\n const units = getCssUnits(distance.type);\n\n const transform = `perspective(${perspective}px) translateX(${translateX}${units}) translateY(${translateY}${units}) scale(${maxScale}, ${maxScale}) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotate(var(--comp-rotate-z, 0deg))`;\n\n const progressDistance = distance2d(
|
|
1
|
+
{"version":3,"names":["getCssUnits","getMouseTransitionEasing","distance2d","mapRange","quadInOut","CustomMouse","paramsMap","soft","angle","scale","easing","medium","hard","BlurMouseAnimation","progress","_ref","x","progressX","y","progressY","distance","invert","blur","perspective","options","translateX","value","translateY","scaleX","scaleY","maxScale","Math","min","rotateX","rotateY","units","type","transform","progressDistance","blurFilter","round","filter","target","style","cancel","transition","create","transitionDuration","transitionEasing","power","inverted","namedEffect","animationOptions"],"sources":["../../../../src/library/mouse/BlurMouse.ts"],"sourcesContent":["import {\n getCssUnits,\n getMouseTransitionEasing,\n distance2d,\n mapRange,\n} from '../../utils';\nimport { quadInOut } from '../../easings';\nimport { CustomMouse } from './CustomMouse';\nimport {\n ScrubAnimationOptions,\n AnimationExtraOptions,\n BlurMouse,\n Progress,\n EffectPower,\n ScrubTransitionEasing,\n} from '../../types';\n\nconst paramsMap: Record<\n EffectPower,\n { angle: number; scale: number; easing: ScrubTransitionEasing }\n> = {\n soft: { angle: 0, scale: 1, easing: 'easeOut' },\n medium: { angle: 25, scale: 0.7, easing: 'easeOut' },\n hard: { angle: 65, scale: 0.25, easing: 'easeOut' },\n};\nclass BlurMouseAnimation extends CustomMouse {\n progress({ x: progressX, y: progressY }: Progress) {\n const { distance, angle, scale, invert, blur, perspective } = this.options;\n\n const translateX =\n mapRange(0, 1, -distance.value, distance.value, progressX) * invert;\n const translateY =\n mapRange(0, 1, -distance.value, distance.value, progressY) * invert;\n\n // if progressX === 0 || progressX === 1, scaleX === scale, if progressX === 0.5, scaleX === 1\n const scaleX =\n progressX < 0.5\n ? mapRange(0, 0.5, scale, 1, progressX)\n : mapRange(0.5, 1, 1, scale, progressX);\n\n // if progressY === 0 || progressY === 1, scaleY === scale, if progressY === 0.5, scaleY === 1\n const scaleY =\n progressY < 0.5\n ? mapRange(0, 0.5, scale, 1, progressY)\n : mapRange(0.5, 1, 1, scale, progressY);\n\n const maxScale = Math.min(scaleX, scaleY);\n\n // if progressX === 0, rotateX === -angle, if progressX === 0.5, rotateX === 0, if progressX === 1, rotateX === angle\n const rotateX = mapRange(0, 1, -angle, angle, progressY) * invert;\n const rotateY = mapRange(0, 1, angle, -angle, progressX) * invert;\n\n const units = getCssUnits(distance.type);\n\n const transform = `perspective(${perspective}px) translateX(${translateX}${units}) translateY(${translateY}${units}) scale(${maxScale}, ${maxScale}) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotate(var(--comp-rotate-z, 0deg))`;\n\n const progressDistance = distance2d([0.5, 0.5], [progressX, progressY]);\n const blurFilter = Math.round(\n mapRange(0, 1, 0, blur, quadInOut(progressDistance)),\n );\n\n const filter = `blur(${blurFilter}px)`;\n\n this.target.style.transform = transform;\n this.target.style.filter = filter;\n }\n\n cancel() {\n this.target.style.transform = '';\n this.target.style.filter = '';\n this.target.style.transition = '';\n }\n}\n\nexport default function create(\n options: ScrubAnimationOptions & AnimationExtraOptions,\n) {\n const { transitionDuration, transitionEasing } = options;\n const {\n power,\n inverted = false,\n distance = { value: 80, type: 'px' },\n angle = 5,\n scale = 0.3,\n blur = 20,\n perspective = 600,\n } = options.namedEffect as BlurMouse;\n const invert = inverted ? -1 : 1;\n const animationOptions = {\n transition: transitionDuration\n ? `transform ${transitionDuration}ms ${getMouseTransitionEasing(\n power ? paramsMap[power].easing : transitionEasing,\n )}, filter ${transitionDuration}ms ${getMouseTransitionEasing(\n power ? paramsMap[power].easing : transitionEasing,\n )}`\n : '',\n distance,\n angle: power ? paramsMap[power].angle : angle,\n scale: power ? paramsMap[power].scale : scale,\n blur,\n perspective,\n invert,\n };\n\n return (target: HTMLElement) =>\n new BlurMouseAnimation(target, animationOptions);\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlurMouse.d.ts","sourceRoot":"","sources":["../../../../src/library/mouse/BlurMouse.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EAErB,QAAQ,EAGT,MAAM,aAAa,CAAC;AAUrB,cAAM,kBAAmB,SAAQ,WAAW;IAC1C,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE,QAAQ;
|
|
1
|
+
{"version":3,"file":"BlurMouse.d.ts","sourceRoot":"","sources":["../../../../src/library/mouse/BlurMouse.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EAErB,QAAQ,EAGT,MAAM,aAAa,CAAC;AAUrB,cAAM,kBAAmB,SAAQ,WAAW;IAC1C,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE,QAAQ;IAyCjD,MAAM;CAKP;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAC5B,OAAO,EAAE,qBAAqB,GAAG,qBAAqB,YA6BtC,WAAW,wBAE5B"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wix/motion",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.602.0",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "wow!Team",
|
|
@@ -83,5 +83,5 @@
|
|
|
83
83
|
"wallaby": {
|
|
84
84
|
"autoDetect": true
|
|
85
85
|
},
|
|
86
|
-
"falconPackageHash": "
|
|
86
|
+
"falconPackageHash": "ee3298727e5bb0634ddc093e000d5d6e9afdf839369a2f87a12dcec8"
|
|
87
87
|
}
|