### Install @wix/interact
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/guides/getting-started.md
Installs the @wix/interact package using npm. This is the first step to using the library in your project.
```bash
npm install @wix/interact
```
--------------------------------
### Vanilla JavaScript Integration with Interact AI
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/integration/README.md
Guides for integrating Interact AI directly with Vanilla JavaScript, covering basic setup, dynamic content, event management, and module system usage.
```JavaScript
// Example of basic Vanilla JS setup for Interact AI
document.addEventListener('DOMContentLoaded', () => {
const interact = new InteractAI(); // Assuming InteractAI is the class name
// Use interact API here
});
// Example of dynamic content integration
function addInteraction(element) {
const interact = new InteractAI();
interact.add(element, { /* options */ });
}
// Example of event management
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
const interact = new InteractAI();
interact.trigger('clickEvent');
});
```
```JavaScript
// Example using ES6 modules
import { InteractAI } from '@wix/interact';
const interact = new InteractAI();
interact.init();
```
```JavaScript
// Example using CommonJS modules
const { InteractAI } = require('@wix/interact');
const interact = new InteractAI();
interact.init();
```
--------------------------------
### React Example: Hover Effect with @wix/interact
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/guides/getting-started.md
Demonstrates how to implement the hover-to-scale interaction within a React application. It mirrors the JavaScript configuration and includes the necessary React component structure.
```typescript
import React from 'react';
import { Interact } from '@wix/interact';
const config = {
interactions: [
{
source: '#my-image',
trigger: 'hover',
effects: [
{
keyframeEffect: [
{ scale: 2 }
],
duration: 300,
easing: 'ease-out'
}
]
}
]
};
Interact.create(config);
function App() {
return (
);
}
```
--------------------------------
### React Integration with Interact AI
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/integration/README.md
Guides for integrating Interact AI into React applications, including basic setup, component patterns, hooks, context, TypeScript support, and performance optimization.
```JavaScript
// Example of basic React setup for Interact AI
import React from 'react';
import { useInteract } from '@wix/interact';
function MyComponent() {
const interact = useInteract();
// Use interact API here
return
Interact AI Example
;
}
```
```TypeScript
// Example of TypeScript integration with Interact AI
import React from 'react';
import { useInteract, InteractInstance } from '@wix/interact';
function MyComponent(): JSX.Element {
const interact: InteractInstance = useInteract();
// Use interact API here with type safety
return
Interact AI TypeScript Example
;
}
```
--------------------------------
### Basic HTML Structure for Interaction
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/guides/getting-started.md
Sets up the necessary HTML structure for an interaction. It includes wrapping the target element with `` and using `data-wix-path` to identify the element.
```html
My First Interaction
```
--------------------------------
### Webpack Setup for Interact AI
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/integration/README.md
Guidance on configuring Webpack for Interact AI, including setup and optimization strategies.
```JavaScript
// Example Webpack configuration snippet for Interact AI
// webpack.config.js
module.exports = {
// ... other configurations
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
// ... other configurations
};
```
--------------------------------
### Common Interaction: Entrance Animation on Viewport Entry
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/guides/getting-started.md
An example of an interaction that triggers an animation when an element enters the viewport. It uses the 'viewEnter' trigger and a named effect 'FadeIn'.
```javascript
{
source: '#my-element',
trigger: 'viewEnter',
effects: [
{
target: '#my-element',
namedEffect: 'FadeIn',
duration: 800,
easing: 'ease-out'
}
]
}
```
--------------------------------
### Install Wix Interact AI with npm, yarn, or pnpm
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/integration/README.md
Provides commands to install the @wix/interact and @wix/motion packages using different package managers: npm, yarn, and pnpm.
```bash
# npm
npm install @wix/interact @wix/motion
```
```bash
# yarn
yarn add @wix/interact @wix/motion
```
```bash
# pnpm
pnpm add @wix/interact @wix/motion
```
--------------------------------
### VS Code Setup for Interact AI Development
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/integration/README.md
Configuration guidance for VS Code to enhance the development experience when working with Interact AI, including linting and formatting.
```JSON
// Example .vscode/settings.json for Interact AI development
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
]
}
```
--------------------------------
### Nuxt.js Setup for Interact AI
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/integration/README.md
Guidance on setting up Interact AI within a Nuxt.js project, including plugin configuration.
```JavaScript
// Example Nuxt.js plugin for Interact AI
// plugins/interact-ai.js
import { InteractAI } from '@wix/interact';
export default ({ app }, inject) => {
const interactInstance = new InteractAI();
// Initialize on the client-side
if (process.client) {
interactInstance.init();
}
// Inject into Nuxt context
inject('interact', interactInstance);
// Optional: Add cleanup logic for SSR/client destruction
app.வுகளை.hook('beforeDestroy', () => {
if (process.client && interactInstance) {
interactInstance.destroy();
}
});
}
```
--------------------------------
### Common Interaction: Hover with Scale and Rotation
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/guides/getting-started.md
An example of a common interaction pattern where an element scales and rotates on hover. It specifies the source, trigger, target, keyframe effects, duration, and easing.
```javascript
{
source: '#my-element',
trigger: 'hover',
effects: [
{
target: '#my-element',
keyframeEffect: [
{ transform: 'scale(1) rotate(0deg)' },
{ transform: 'scale(1.1) rotate(5deg)' }
],
duration: 200,
easing: 'ease-out'
}
]
}
```
--------------------------------
### Common Interaction: Click to Fade In/Out
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/guides/getting-started.md
An example of a click-triggered interaction that fades another element in and out. It defines the source, trigger, target, keyframe effects (opacity), duration, easing, and fill mode.
```javascript
{
source: '#my-button',
trigger: 'click',
effects: [
{
target: '#my-content',
keyframeEffect: [
{ opacity: '0' },
{ opacity: '1' }
],
duration: 500,
easing: 'ease-in-out',
fill: 'both'
}
]
}
```
--------------------------------
### Loading Sequence Example
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/guides/understanding-triggers.md
A real-world example of a loading sequence using multiple animations. It fades in a logo, then slides up text, and finally fades in the main content, all orchestrated by `animationEnd` triggers.
```typescript
const loadingSequence = [
{
source: '#app-logo',
trigger: 'viewEnter',
effects: [{
target: '#app-logo',
namedEffect: 'FadeIn',
duration: 800,
effectId: 'logo-appear'
}]
},
{
source: '#app-logo',
trigger: 'animationEnd',
params: { effectId: 'logo-appear' },
effects: [{
target: '#loading-text',
namedEffect: 'SlideUp',
duration: 600,
effectId: 'text-appear'
}]
},
{
source: '#loading-text',
trigger: 'animationEnd',
params: { effectId: 'text-appear' },
effects: [{
target: '#main-content',
namedEffect: 'FadeIn',
duration: 1000
}]
}
];
```
--------------------------------
### Testing Interactions with Interact AI
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/integration/README.md
Comprehensive guides for testing Interact AI implementations, including unit, integration, visual, performance, and accessibility testing.
```JavaScript
// Example of unit testing an Interact AI hook (conceptual with Jest)
// interact.test.js
import { renderHook, act } from '@testing-library/react-hooks';
import { useInteract } from '@wix/interact';
// Mock the useInteract hook if necessary
// jest.mock('@wix/interact', () => ({ ... }));
describe('useInteract hook', () => {
it('should initialize interact instance', () => {
const { result } = renderHook(() => useInteract());
// Assert that the interact instance is created correctly
expect(result.current).toBeDefined();
});
it('should trigger an action', () => {
const { result } = renderHook(() => useInteract());
// Mock a method on the interact instance
const mockTrigger = jest.fn();
result.current.trigger = mockTrigger;
act(() => {
result.current.trigger('someAction');
});
expect(mockTrigger).toHaveBeenCalledWith('someAction');
});
});
```
```JavaScript
// Example of integration testing Interact AI functionality (conceptual)
// integration.test.js
describe('Interact AI Integration', () => {
it('should animate element on scroll', async () => {
// Setup DOM with an element that should animate
document.body.innerHTML = '
Hello
';
// Initialize Interact AI with scroll trigger
const interact = new InteractAI();
interact.add('#animated-element', {
trigger: { type: 'scroll' },
animation: { type: 'fade', direction: 'in' }
});
// Simulate scrolling or wait for intersection observer callback
// Assert that the element's style has changed
});
});
```
--------------------------------
### Vite Configuration for Interact AI
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/integration/README.md
Guidance on setting up Vite for Interact AI, covering configuration and development experience.
```JavaScript
// Example Vite configuration snippet for Interact AI
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
// ... other configurations
plugins: [
// Vite handles JS/TS transpilation automatically
],
// ... other configurations
});
```
--------------------------------
### Migration from Framer Motion to Interact AI
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/integration/README.md
Guides for migrating React animations from Framer Motion to Interact AI.
```JavaScript
// Conceptual example of migrating Framer Motion to Interact AI
// Framer Motion Example:
//
// Interact AI Equivalent (conceptual):
// import { useInteract } from '@wix/interact';
//
// function MyAnimatedComponent() {
// const interact = useInteract();
//
// React.useEffect(() => {
// interact.add(document.getElementById('my-div'), {
// animation: {
// type: 'tween',
// property: 'x',
// value: 100,
// duration: 1
// }
// });
// }, []);
//
// return
Animated Content
;
// }
```
--------------------------------
### Web Components Integration with Interact AI
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/integration/README.md
Guidance for framework-agnostic usage of Interact AI with Web Components.
```JavaScript
// Example of Web Component integration with Interact AI (conceptual)
import { InteractAI } from '@wix/interact';
class MyInteractiveComponent extends HTMLElement {
connectedCallback() {
this.interact = new InteractAI();
this.interact.add(this);
}
disconnectedCallback() {
if (this.interact) {
this.interact.destroy();
}
}
}
customElements.define('my-interactive-component', MyInteractiveComponent);
```
--------------------------------
### Debugging Interact AI Animations
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/integration/README.md
Guides on using development tools and techniques for debugging Interact AI animations, including browser DevTools, animation inspectors, and performance profiling.
```JavaScript
// Example of using console logging for debugging Interact AI
// In your Interact AI initialization or animation logic:
const interact = new InteractAI();
interact.init({
debug: true // Assuming a debug flag exists
});
// Or manually log steps:
console.log('Interact AI initialized');
interact.add('#myElement', {
animation: {
type: 'tween',
property: 'opacity',
value: 0.5,
duration: 1
}
});
console.log('Element added to Interact AI');
```
```JavaScript
// Example of using Browser DevTools Performance tab
// 1. Open Chrome DevTools (F12)
// 2. Go to the 'Performance' tab
// 3. Click 'Record' and interact with your page
// 4. Stop recording
// 5. Look for 'InteractAI' or related function calls in the timeline
// to identify performance bottlenecks or unexpected behavior.
```
--------------------------------
### Migration from Lottie to Interact AI
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/integration/README.md
Documentation on migrating complex animations, such as those from Lottie, to Interact AI.
```JavaScript
// Conceptual example of migrating Lottie animation to Interact AI
// Lottie Example:
// var animation = bodymovin.loadAnimation({ ... });
// Interact AI Equivalent (conceptual):
// const interact = new InteractAI();
// interact.add('#lottie-container', {
// animation: {
// type: 'lottie',
// url: 'path/to/animation.json'
// }
// });
```
--------------------------------
### Next.js Integration with Interact AI
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/integration/README.md
Guides for integrating Interact AI into Next.js applications, covering Server-Side Rendering (SSR) and Static Site Generation (SSG) support, and hydration issues.
```JavaScript
// Example of using Interact AI in a Next.js page component
// pages/index.js
import React, { useEffect } from 'react';
import { useInteract } from '@wix/interact';
function HomePage() {
const interact = useInteract();
useEffect(() => {
// Interact AI logic that should run on the client
if (interact) {
interact.init();
}
}, [interact]);
return (
Welcome to Next.js with Interact AI
{/* Your content here */}
);
}
export default HomePage;
```
--------------------------------
### Svelte Integration with Interact AI
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/integration/README.md
Instructions on using Interact AI with Svelte actions.
```JavaScript
// Example of Svelte action for Interact AI (conceptual)
import { InteractAI } from '@wix/interact';
export function interactAction(node, options) {
const interact = new InteractAI(options);
interact.add(node);
return {
update(newOptions) {
// Update interact instance if options change
},
destroy() {
interact.destroy();
}
};
}
```
--------------------------------
### Migration from AOS to Interact AI
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/integration/README.md
Guides for migrating scroll-based animations from AOS (Animate On Scroll) to Interact AI.
```JavaScript
// Conceptual example of migrating AOS to Interact AI
// AOS Example:
//
Content
// Interact AI Equivalent (conceptual):
// const interact = new InteractAI();
// interact.add('[data-aos="fade-up"]', {
// trigger: {
// type: 'scroll',
// once: true
// },
// animation: {
// type: 'fade',
// direction: 'up'
// }
// });
```
--------------------------------
### Hero Section Entrance Animation Example (TypeScript)
Source: https://github.com/wix-incubator/interact-ai/blob/master/rules/viewenter-rules.md
An example demonstrating a 'once' ViewEnter trigger for a hero section, applying a keyframe animation with opacity and transform changes when the element enters the viewport.
```typescript
{
source: '#hero-section',
trigger: 'viewEnter',
params: {
type: 'once',
threshold: 0.3,
inset: '-100px'
},
effects: [
{
target: '#hero-section',
keyframeEffect: {
opacity: ['0', '1'],
transform: ['translateY(60px) scale(0.95)', 'translateY(0) scale(1)']
},
duration: 1000,
easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
effectId: 'hero-entrance'
}
]
}
```
--------------------------------
### Upgrading from Interact AI v0.x
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/integration/README.md
Information on breaking changes and the migration path when upgrading from version 0.x of Interact AI.
```JavaScript
// Example of API change from v0.x to v1.x (conceptual)
// v0.x Example:
// const interact = new InteractAI.Instance();
// interact.playAnimation('myAnimation');
// v1.x Example:
// const interact = new InteractAI();
// interact.add('#element', { animation: { type: 'predefined', name: 'myAnimation' } });
// interact.trigger('play');
```
--------------------------------
### Migration from GSAP to Interact AI
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/integration/README.md
Documentation on migrating animations and interactions from GSAP to Interact AI.
```JavaScript
// Conceptual example of migrating GSAP animation to Interact AI
// GSAP Example:
// gsap.to("#element", { x: 100, duration: 1 });
// Interact AI Equivalent (conceptual):
// const interact = new InteractAI();
// interact.add('#element', {
// animation: {
// type: 'tween',
// property: 'x',
// value: 100,
// duration: 1
// }
// });
```
--------------------------------
### ViewEnterParams Examples
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/api/types.md
Provides examples for `ViewEnterParams`, showing how to configure triggers to fire once, repeatedly, or alternate effects based on viewport visibility.
```TypeScript
// Trigger once when 50% visible
const onceParams: ViewEnterParams = {
type: 'once',
threshold: 0.5
};
// Trigger repeatedly with margin
const repeatParams: ViewEnterParams = {
type: 'repeat',
threshold: 0.1,
inset: '100px'
};
// Alternate effects on enter/exit
const alternateParams: ViewEnterParams = {
type: 'alternate',
threshold: 0.3
};
```
--------------------------------
### Wix Interact ViewEnter Trigger Rule Example
Source: https://github.com/wix-incubator/interact-ai/blob/master/rules/PLAN.md
A rule template for configuring entrance animations with viewport intersection parameters.
```TypeScript
{
source: 'section',
trigger: 'viewEnter',
params: {
threshold: 0.5,
once: true
},
effects: [
{ type: 'FadeIn', duration: 600 },
{ type: 'SlideIn', direction: 'bottom', duration: 600 }
]
}
```
--------------------------------
### PointerMoveParams Example
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/api/types.md
An example showing how to configure `PointerMoveParams` to track mouse movements across the entire page ('root').
```TypeScript
const pointerParams: PointerMoveParams = {
hitArea: 'root' // Track mouse across entire page
};
```
--------------------------------
### Migration from Animate.css to Interact AI
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/integration/README.md
Documentation on migrating CSS animations from Animate.css to Interact AI.
```CSS
/* Animate.css Example */
/*
Animate.css
*/
/* Interact AI Equivalent (conceptual JavaScript):
const interact = new InteractAI();
interact.add('.animate__animated', {
animation: {
type: 'keyframes',
name: 'bounce',
duration: '1s'
}
});
*/
```
--------------------------------
### Wix Interact Card Entrance Example
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/guides/effects-and-animations.md
A real-world example of a card entrance animation using Wix Interact. It triggers on 'viewEnter' and uses keyframes to animate opacity and transform properties, with custom easing and 'forwards' fill mode.
```typescript
{
source: '#product-card',
trigger: 'viewEnter',
params: { type: 'once', threshold: 0.3 },
effects: [
{
keyframeEffect: {
opacity: ['0', '1'],
transform: ['translateY(60px) scale(0.9)', 'translateY(0) scale(1)']
},
duration: 800,
easing: 'cubic-bezier(0.16, 1, 0.3, 1)', // Custom easing
fill: 'forwards'
}
]
}
```
--------------------------------
### Angular Integration with Interact AI
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/integration/README.md
Guidance on integrating Interact AI using an Angular service approach.
```TypeScript
// Example of Angular service integration with Interact AI (conceptual)
import { Injectable } from '@angular/core';
import { InteractAI } from '@wix/interact';
@Injectable({ providedIn: 'root' })
export class InteractAIService {
private interactInstance: InteractAI;
constructor() {
this.interactInstance = new InteractAI();
this.interactInstance.init();
}
// Expose methods to interact with the instance
triggerAction(action: string) {
this.interactInstance.trigger(action);
}
destroy() {
this.interactInstance.destroy();
}
}
```
--------------------------------
### Basic Entrance Animation with Fade-in
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/examples/README.md
Demonstrates a basic entrance animation using the 'viewEnter' trigger and a 'fade-in' effect. It requires the Interact library and a corresponding HTML element with the data-wix-path attribute.
```typescript
import { Interact } from '@wix/interact';
const config = {
interactions: [{
trigger: 'viewEnter',
source: '#hero',
effects: [{ effectId: 'fade-in' }]
}],
effects: {
'fade-in': {
duration: 1000,
keyframeEffect: {
opacity: [0, 1],
transform: ['translateY(20px)', 'translateY(0)']
}
}
}
};
Interact.create(config);
```
```html
Welcome to our site!
```
--------------------------------
### Initialize Wix Interact AI
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/integration/README.md
Demonstrates the basic integration of the Wix Interact AI library by importing the 'Interact' class and creating an instance with a configuration object.
```typescript
import { Interact } from '@wix/interact';
// Create configuration
const config = { /* your config */ };
// Initialize
const interact = Interact.create(config);
```
--------------------------------
### TypeScript: Example - Multi-Layer Scroll Effect
Source: https://github.com/wix-incubator/interact-ai/blob/master/rules/viewprogress-rules.md
Illustrates a multi-layer scroll effect, animating the transform and filter properties of a background layer. This example uses different start and end ranges ('enter' and 'exit') and applies a linear easing function.
```typescript
{
source: '#complex-section',
trigger: 'viewProgress',
effects: [
{
target: '#background-layer',
keyframeEffect: {
transform: ['scale(1.1) translateY(0)', 'scale(1) translateY(-100px)'],
filter: ['blur(0)', 'blur(2px)']
},
rangeStart: { name: 'enter', offset: { value: 0 } },
rangeEnd: { name: 'exit', offset: { value: 100 } },
easing: 'linear',
effectId: 'bg-scroll'
}
]
}
```
--------------------------------
### Wix Motion Scrub Effect Range Configuration
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/guides/effects-and-animations.md
Shows how to configure the start and end points for scrub effects in Wix Interact. This example fades an element out, starting the animation at 30% scroll progress and ending it at 80% scroll progress.
```typescript
{
target: '#fade-element',
keyframeEffect: {
opacity: ['1', '0']
},
rangeStart: { name: 'cover', offset: { value: 30 } }, // Start at 30% scroll
rangeEnd: { name: 'cover', offset: { value: 80 } } // End at 80% scroll
}
```
--------------------------------
### Matching Selectors for data-wix-path
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/guides/custom-elements.md
Illustrates how the `data-wix-path` attribute in `` must correspond to the CSS selector of the interaction source, shown with a TypeScript configuration example.
```typescript
// Configuration
{
source: '#my-button', // This selector...
trigger: 'hover',
effects: [/* ... */]
}
```
```html
```
--------------------------------
### Path Patterns for data-wix-path
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/guides/custom-elements.md
Provides examples of various valid CSS selectors that can be used with the `data-wix-path` attribute, including ID, class, attribute, and complex selectors.
```html
Content
Card content
Product card
```
--------------------------------
### TypeScript Entrance Animation Template
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/examples/README.md
A basic template for creating entrance animations using Interact AI. It defines interaction triggers, source elements, and effect configurations for entry animations.
```typescript
const entranceConfig = {
interactions: [{
trigger: 'viewEnter',
source: '#element',
params: { type: 'once', threshold: 0.1 },
effects: [{ effectId: 'entrance-effect' }]
}],
effects: {
'entrance-effect': {
duration: 800,
easing: 'ease-out',
keyframeEffect: {
// Add your keyframes here
}
}
}
};
```
--------------------------------
### Configure Hover Effect with @wix/interact
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/guides/getting-started.md
Configures a hover interaction that scales an element. It defines the source element, trigger type ('hover'), and the animation effect (scale) with duration and easing.
```javascript
import { Interact } from '@wix/interact';
// Create the interaction configuration
const config = {
interactions: [
{
source: '#my-image', // What element triggers the interaction
trigger: 'hover', // What user action starts it
effects: [
{
keyframeEffect: [
{ scale: 2 }
],
duration: 300, // Animation duration in milliseconds
easing: 'ease-out' // Animation timing
}
]
}
]
};
// Initialize the interaction
Interact.create(config);
```
--------------------------------
### Vue Integration with Wix Interact
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/guides/custom-elements.md
Provides a Vue.js component example that integrates ``, dynamically setting the `data-wix-path` and initializing interactions using `Interact.create` in the `mounted` hook.
```vue
```
--------------------------------
### Nested Wix Interact Elements (HTML)
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/guides/custom-elements.md
Shows how to implement nested Wix Interact elements to create complex interaction hierarchies. This example demonstrates an outer container with an inner button, allowing for nested interaction targeting.
```html
Other content in outer container
```
--------------------------------
### Troubleshooting: Path Selector Mismatch (TypeScript/HTML)
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/guides/custom-elements.md
Highlights a common issue where the path selector in the configuration does not match the `data-wix-path` attribute of the Wix Interact element. This example shows a configuration using a class selector and the corresponding correct HTML structure.
```typescript
// Configuration uses class selector
{
source: '.my-card', // Class selector
trigger: 'hover'
}
```
```html
Card
Card
```
--------------------------------
### Progressive Enhancement Example
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/guides/conditions-and-media-queries.md
Illustrates progressive enhancement by defining a base interaction that works everywhere and an enhanced interaction for capable devices, using conditions like 'desktop' and 'motion-ok'.
```typescript
const progressiveConfig: InteractConfig = {
interactions: [
// Base interaction - works everywhere
{
source: '.button',
trigger: 'click',
effects: [
{
target: '.button',
namedEffect: 'Pulse',
duration: 200
}
]
},
// Enhanced interaction - only on capable devices
{
source: '.button',
trigger: 'hover',
conditions: ['desktop', 'motion-ok'],
effects: [
{
target: '.button',
keyframeEffect: {
transform: ['translateY(0)', 'translateY(-2px)'],
boxShadow: ['0 2px 4px rgba(0,0,0,0.1)', '0 8px 16px rgba(0,0,0,0.15)']
},
duration: 250
}
]
}
]
};
```
--------------------------------
### Dynamically Update Wix Interact Element Path (JavaScript)
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/guides/custom-elements.md
Provides a JavaScript example for dynamically updating the interaction path of a Wix Interact element. It includes steps to remove old interactions, update the `data-wix-path` attribute, and reconnect the element with the new path.
```javascript
const element = document.querySelector('wix-interact-element');
// Remove old interactions
if (element.dataset.wixPath) {
remove(element.dataset.wixPath);
}
// Update path
element.dataset.wixPath = '#new-target';
// Reconnect with new path
element.connect('#new-target');
```
--------------------------------
### InteractConfig Example
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/api/types.md
An example demonstrating how to configure interactions, effects, and conditions using the `InteractConfig` type.
```TypeScript
const config: InteractConfig = {
interactions: [
{
trigger: 'viewEnter',
source: '#hero',
effects: [{ effectId: 'fade-in' }]
},
{
trigger: 'hover',
source: '#button',
conditions: ['desktop-only'],
effects: [{ effectId: 'lift' }]
}
],
effects: {
'fade-in': {
duration: 1000,
keyframeEffect: {
opacity: [0, 1],
transform: ['translateY(20px)', 'translateY(0)']
}
},
'lift': {
duration: 200,
keyframeEffect: {
transform: ['translateY(0)', 'translateY(-4px)']
}
}
},
conditions: {
'desktop-only': {
type: 'media',
predicate: '(min-width: 1024px)'
}
}
};
```
--------------------------------
### Wix Interact Conditions with Media Queries
Source: https://github.com/wix-incubator/interact-ai/blob/master/rules/PLAN.md
Demonstrates how the conditions system in Interact AI enables responsive interactions using media query patterns.
```TypeScript
{
trigger: 'viewEnter',
conditions: {
media: '(min-width: 768px)'
},
effects: [{ type: 'SlideIn', direction: 'left' }]
}
```
--------------------------------
### Basic Usage Pattern - TypeScript
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/api/README.md
Demonstrates the basic pattern for using the @wix/interact library, including creating configuration, initializing the Interact instance, and referencing elements in HTML using the wix-interact-element custom element.
```typescript
// 1. Create configuration
const config: InteractConfig = {
interactions: [{ /* ... */ }],
effects: { /* ... */ }
};
// 2. Initialize
const interact = Interact.create(config);
// 3. HTML usage
//
//
Content
//
```
--------------------------------
### Interaction Example
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/api/types.md
An example illustrating the structure of a single interaction, including trigger, source, parameters, conditions, and effects.
```TypeScript
const interaction: Interaction = {
trigger: 'viewEnter',
source: '#hero',
params: {
type: 'once',
threshold: 0.2,
inset: '50px'
},
conditions: ['reduced-motion-off'],
effects: [
{ effectId: 'entrance-animation' },
{
target: '#hero-text',
effectId: 'text-reveal',
conditions: ['desktop-only']
}
]
};
```
--------------------------------
### Interact Best Practice: Standard Usage with create()
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/api/interact-class.md
Highlights the recommended way to instantiate the Interact class using `Interact.create(config)` for standard usage, contrasting it with manual initialization.
```typescript
// ✅ Recommended
const interact = Interact.create(config);
// ❌ Avoid manual construction
const interact = new Interact();
interact.init(config);
```
--------------------------------
### Example Effect Reference Usage (TypeScript)
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/api/types.md
Demonstrates how to use an `EffectRef` to reference a reusable effect and how to include it in an interaction definition. It also shows an example of an inline effect.
```typescript
// Reference a reusable effect
const effectRef: EffectRef = {
effectId: 'slide-up',
target: '#custom-target',
conditions: ['desktop-only']
};
// Used in interaction
const interaction: Interaction = {
trigger: 'viewEnter',
source: '#trigger',
effects: [
effectRef, // Reference existing effect
{
// Inline effect
duration: 500,
keyframeEffect: { opacity: [0, 1] }
}
]
};
```
--------------------------------
### Desktop-Only Hover Effect Example
Source: https://github.com/wix-incubator/interact-ai/blob/master/rules/hover-rules.md
An example of a conditional hover effect that applies a scaling animation to a hero image, but only on desktop devices and when the user prefers reduced motion.
```typescript
// Desktop-only hover effect
{
source: '#hero-image',
trigger: 'hover',
params: {
type: 'alternate'
},
conditions: ['desktop-only', 'prefers-motion'],
effects: [
{
target: '#hero-image',
namedEffect: 'Scale',
duration: 400,
easing: 'ease-out'
}
]
}
```
--------------------------------
### Interact AI: E-commerce Product Grid Responsiveness
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/guides/conditions-and-media-queries.md
Sets up responsive interactions for an e-commerce product grid, adapting to desktop, tablet, and mobile viewports. It includes hover effects for desktop with scaling and opacity changes, and click feedback for mobile and tablet, optimizing the user experience across devices.
```typescript
const productGridConfig: InteractConfig = {
conditions: {
'desktop': {
type: 'media',
predicate: '(min-width: 1024px)'
},
'tablet': {
type: 'media',
predicate: '(min-width: 768px) and (max-width: 1023px)'
},
'mobile': {
type: 'media',
predicate: '(max-width: 767px)'
},
'large-product-card': {
type: 'container',
predicate: '(min-width: 300px)'
},
'motion-ok': {
type: 'media',
predicate: '(prefers-reduced-motion: no-preference)'
}
},
interactions: [
// Desktop: Full hover experience
{
source: '.product-card',
trigger: 'hover',
conditions: ['desktop', 'large-product-card', 'motion-ok'],
effects: [
{
target: '.product-image',
keyframeEffect: {
transform: ['scale(1)', 'scale(1.05)']
},
duration: 300
},
{
target: '.product-overlay',
keyframeEffect: {
opacity: ['0', '1'],
transform: ['translateY(100%)', 'translateY(0)']
},
duration: 250,
delay: 50
},
{
target: '.quick-view-button',
keyframeEffect: {
opacity: ['0', '1'],
transform: ['scale(0.8)', 'scale(1)']
},
duration: 200,
delay: 150
}
]
},
// Mobile: Touch feedback only
{
source: '.product-card',
trigger: 'click',
conditions: ['mobile'],
effects: [
{
target: '.product-card',
keyframeEffect: {
transform: ['scale(1)', 'scale(0.98)', 'scale(1)']
},
duration: 150
}
]
},
// Tablet: Intermediate experience
{
source: '.product-card',
trigger: 'click',
conditions: ['tablet'],
effects: [
{
target: '.product-overlay',
keyframeEffect: {
opacity: ['0', '1']
},
duration: 200
}
]
}
]
};
```
--------------------------------
### Card Grid Stagger Animation Example (TypeScript)
Source: https://github.com/wix-incubator/interact-ai/blob/master/rules/viewenter-rules.md
An example demonstrating staggered 'SlideIn' animations for a card grid. Each card animates sequentially with a 150ms delay between them, triggered when they enter the viewport.
```typescript
[
{
source: '#card-1',
trigger: 'viewEnter',
params: {
type: 'once',
threshold: 0.3
},
effects: [
{
namedEffect: 'SlideIn',
duration: 600,
easing: 'ease-out',
delay: 0
}
]
},
{
source: '#card-2',
trigger: 'viewEnter',
params: {
type: 'once',
threshold: 0.3
},
effects: [
{
namedEffect: 'SlideIn',
duration: 600,
easing: 'ease-out',
delay: 150
}
]
},
{
source: '#card-3',
trigger: 'viewEnter',
params: {
type: 'once',
threshold: 0.3
},
effects: [
{
namedEffect: 'SlideIn',
duration: 600,
easing: 'ease-out',
delay: 300
}
]
}
]
```
--------------------------------
### Basic Hover Trigger Usage
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/guides/understanding-triggers.md
Demonstrates the basic usage of the 'hover' trigger, which responds to mouse enter and leave events. This example scales an element on hover.
```typescript
{
source: '#my-button',
trigger: 'hover',
effects: [
{
keyframeEffect: [
{ scale: 2 }
],
duration: 200
}
]
}
```
--------------------------------
### wix-interact-element with data-wix-path Example
Source: https://github.com/wix-incubator/interact-ai/blob/master/docs/api/wix-interact-element.md
Provides an example of the `data-wix-path` attribute, a required property for the wix-interact-element. This attribute serves as a unique identifier that must match the interaction configuration's source.
```html
Hero content
```
--------------------------------
### Vanilla JavaScript for Interact AI
Source: https://github.com/wix-incubator/interact-ai/blob/master/rules/README.md
Shows how to integrate Interact AI using plain JavaScript. This example sets up a 'viewEnter' trigger for elements with the class 'card', applying a 'SlideIn' named effect.
```javascript
import { Interact } from '@wix/interact';
Interact.create({
interactions: [
{
source: '.card',
trigger: 'viewEnter',
params: {
type: 'once',
threshold: 0.1
},
effects: [
{
target: '.card',
namedEffect: 'SlideIn',
duration: 600,
easing: 'ease-out'
}
]
}
]
});
```
