@wix/interact 2.1.4 → 2.2.0

package/docs/examples/entrance-animations.md

@@ -26,7 +26,7 @@ const config = {
     {
       key: 'content',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.2 },
+      params: { threshold: 0.2 },
       effects: [
         {
           key: 'content',
@@ -62,7 +62,7 @@ Add a delay for dramatic timing.
 {
     key: 'delayed-content',
     trigger: 'viewEnter',
-    params: { type: 'once', threshold: 0.2 },
+    params: { threshold: 0.2 },
     effects: [{
         key: 'delayed-content',
         keyframeEffect: {
@@ -87,9 +87,10 @@ Trigger animation every time element enters viewport.
 {
     key: 'repeating-element',
     trigger: 'viewEnter',
-    params: { type: 'repeat', threshold: 0.3 },  // Repeat on each entry
+    params: { threshold: 0.3 },
     effects: [{
         key: 'repeating-element',
+        triggerType: 'repeat',
         keyframeEffect: {
             name: 'repeat-fade',
             keyframes: [
@@ -113,7 +114,7 @@ Element slides up from below while fading in.
 {
     key: 'slide-up',
     trigger: 'viewEnter',
-    params: { type: 'once', threshold: 0.2 },
+    params: { threshold: 0.2 },
     effects: [{
         key: 'slide-up',
         keyframeEffect: {
@@ -137,7 +138,7 @@ Element slides down from above.
 {
     key: 'slide-down',
     trigger: 'viewEnter',
-    params: { type: 'once', threshold: 0.2 },
+    params: { threshold: 0.2 },
     effects: [{
         key: 'slide-down',
         keyframeEffect: {
@@ -161,7 +162,7 @@ Element slides in from the left side.
 {
     key: 'slide-left',
     trigger: 'viewEnter',
-    params: { type: 'once', threshold: 0.2 },
+    params: { threshold: 0.2 },
     effects: [{
         key: 'slide-left',
         keyframeEffect: {
@@ -185,7 +186,7 @@ Element slides in from the right side.
 {
     key: 'slide-right',
     trigger: 'viewEnter',
-    params: { type: 'once', threshold: 0.2 },
+    params: { threshold: 0.2 },
     effects: [{
         key: 'slide-right',
         keyframeEffect: {
@@ -211,7 +212,7 @@ Element grows from small to full size.
 {
     key: 'scale-up',
     trigger: 'viewEnter',
-    params: { type: 'once', threshold: 0.2 },
+    params: { threshold: 0.2 },
     effects: [{
         key: 'scale-up',
         keyframeEffect: {
@@ -235,7 +236,7 @@ Element shrinks from large to normal size.
 {
     key: 'scale-down',
     trigger: 'viewEnter',
-    params: { type: 'once', threshold: 0.2 },
+    params: { threshold: 0.2 },
     effects: [{
         key: 'scale-down',
         keyframeEffect: {
@@ -259,7 +260,7 @@ Element bounces into view with elastic scaling.
 {
     key: 'bounce-in',
     trigger: 'viewEnter',
-    params: { type: 'once', threshold: 0.2 },
+    params: { threshold: 0.2 },
     effects: [{
         key: 'bounce-in',
         keyframeEffect: {
@@ -287,7 +288,7 @@ Element rotates as it enters.
 {
     key: 'rotate-in',
     trigger: 'viewEnter',
-    params: { type: 'once', threshold: 0.2 },
+    params: { threshold: 0.2 },
     effects: [{
         key: 'rotate-in',
         keyframeEffect: {
@@ -311,7 +312,7 @@ Element flips on the Y-axis.
 {
     key: 'flip-in',
     trigger: 'viewEnter',
-    params: { type: 'once', threshold: 0.2 },
+    params: { threshold: 0.2 },
     effects: [{
         key: 'flip-in',
         keyframeEffect: {
@@ -335,7 +336,7 @@ Element rotates in 3D space.
 {
     key: 'rotate-3d',
     trigger: 'viewEnter',
-    params: { type: 'once', threshold: 0.2 },
+    params: { threshold: 0.2 },
     effects: [{
         key: 'rotate-3d',
         keyframeEffect: {
@@ -367,7 +368,7 @@ Combine multiple transformations for rich effects.
 {
     key: 'combo',
     trigger: 'viewEnter',
-    params: { type: 'once', threshold: 0.2 },
+    params: { threshold: 0.2 },
     effects: [{
         key: 'combo',
         keyframeEffect: {
@@ -397,7 +398,7 @@ Element transitions from blurred to sharp.
 {
     key: 'blur-focus',
     trigger: 'viewEnter',
-    params: { type: 'once', threshold: 0.2 },
+    params: { threshold: 0.2 },
     effects: [{
         key: 'blur-focus',
         keyframeEffect: {
@@ -429,7 +430,7 @@ Element slides and rotates simultaneously.
 {
     key: 'slide-rotate',
     trigger: 'viewEnter',
-    params: { type: 'once', threshold: 0.2 },
+    params: { threshold: 0.2 },
     effects: [{
         key: 'slide-rotate',
         keyframeEffect: {
@@ -464,7 +465,7 @@ const config = {
     {
       key: 'hero-title',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.3 },
+      params: { threshold: 0.3 },
       effects: [
         {
           key: 'hero-title',
@@ -551,7 +552,7 @@ const config = {
     {
       key: 'feature-1',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.2 },
+      params: { threshold: 0.2 },
       effects: [
         {
           key: 'feature-1',
@@ -571,7 +572,7 @@ const config = {
     {
       key: 'feature-2',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.2 },
+      params: { threshold: 0.2 },
       effects: [
         {
           key: 'feature-2',
@@ -591,7 +592,7 @@ const config = {
     {
       key: 'feature-3',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.2 },
+      params: { threshold: 0.2 },
       effects: [
         {
           key: 'feature-3',
@@ -625,7 +626,7 @@ const heroConfig = {
     {
       key: 'hero-bg',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.1 },
+      params: { threshold: 0.1 },
       effects: [
         {
           key: 'hero-bg',
@@ -645,7 +646,7 @@ const heroConfig = {
     {
       key: 'hero-content',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.2 },
+      params: { threshold: 0.2 },
       effects: [
         {
           key: 'hero-title',
@@ -667,7 +668,7 @@ const heroConfig = {
     {
       key: 'hero-content',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.2 },
+      params: { threshold: 0.2 },
       effects: [
         {
           key: 'hero-content',
@@ -689,7 +690,7 @@ const heroConfig = {
     {
       key: 'hero-content',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.2 },
+      params: { threshold: 0.2 },
       effects: [
         {
           key: 'hero-content',
@@ -738,7 +739,7 @@ const featureConfig = {
       key: 'features',
       listContainer: '.feature-grid',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.15 },
+      params: { threshold: 0.15 },
       effects: [
         {
           key: 'features',
@@ -807,7 +808,7 @@ const testimonialConfig = {
       key: 'testimonials',
       listContainer: '.testimonial-list',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.2 },
+      params: { threshold: 0.2 },
       effects: [
         {
           key: 'testimonials',
@@ -865,7 +866,7 @@ const config = {
     {
       key: 'hero',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.2 },
+      params: { threshold: 0.2 },
       effects: [
         {
           keyframeEffect: {

package/docs/examples/list-patterns.md

@@ -29,7 +29,7 @@ const config = {
       key: 'item-list',
       listContainer: '.items',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.1 },
+      params: { threshold: 0.1 },
       effects: [
         {
           key: 'item-list',
@@ -70,7 +70,7 @@ const config = {
       key: 'features',
       listContainer: '.feature-list',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.2 },
+      params: { threshold: 0.2 },
       effects: [
         {
           key: 'features',
@@ -121,7 +121,7 @@ const config = {
       key: 'cards',
       listContainer: '.card-grid',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.15 },
+      params: { threshold: 0.15 },
       effects: [
         {
           key: 'cards',
@@ -153,7 +153,7 @@ const config = {
       key: 'photos',
       listContainer: '.photo-grid',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.1 },
+      params: { threshold: 0.1 },
       effects: [
         {
           key: 'photos',
@@ -185,7 +185,7 @@ const config = {
       key: 'timeline',
       listContainer: '.timeline-items',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.2 },
+      params: { threshold: 0.2 },
       effects: [
         {
           key: 'timeline',
@@ -228,7 +228,7 @@ const config = {
       key: 'stagger-list',
       listContainer: '.items',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.1 },
+      params: { threshold: 0.1 },
       effects: [
         {
           key: 'stagger-list',
@@ -279,7 +279,7 @@ const config = {
       key: 'wave',
       listContainer: '.wave-list',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.15 },
+      params: { threshold: 0.15 },
       effects: [
         {
           key: 'wave',
@@ -317,7 +317,7 @@ const config = {
       key: 'ripple',
       listContainer: '.grid',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.2 },
+      params: { threshold: 0.2 },
       effects: [
         {
           key: 'ripple',
@@ -495,11 +495,11 @@ const config = {
       key: 'todo-list',
       listContainer: '.todos',
       trigger: 'viewEnter',
-      params: { type: 'repeat' }, // Trigger for each new item
       effects: [
         {
           key: 'todo-list',
           listContainer: '.todos',
+          triggerType: 'repeat',
           keyframeEffect: {
             name: 'add-item',
             keyframes: [
@@ -545,11 +545,11 @@ const config = {
       key: 'cart',
       listContainer: '.cart-items',
       trigger: 'viewEnter',
-      params: { type: 'repeat' },
       effects: [
         {
           key: 'cart',
           listContainer: '.cart-items',
+          triggerType: 'repeat',
           keyframeEffect: {
             name: 'cart-add',
             keyframes: [
@@ -583,11 +583,12 @@ const config = {
       key: 'infinite',
       listContainer: '.infinite-list',
       trigger: 'viewEnter',
-      params: { type: 'repeat', threshold: 0.1 },
+      params: { threshold: 0.1 },
       effects: [
         {
           key: 'infinite',
           listContainer: '.infinite-list',
+          triggerType: 'repeat',
           keyframeEffect: {
             name: 'scroll-fade',
             keyframes: [
@@ -660,7 +661,7 @@ const config = {
       listContainer: '.responsive-grid',
       trigger: 'viewEnter',
       conditions: ['mobile'],
-      params: { type: 'once', threshold: 0.1 },
+      params: { threshold: 0.1 },
       effects: [
         {
           key: 'grid',
@@ -679,7 +680,7 @@ const config = {
       listContainer: '.responsive-grid',
       trigger: 'viewEnter',
       conditions: ['desktop'],
-      params: { type: 'once', threshold: 0.15 },
+      params: { threshold: 0.15 },
       effects: [
         {
           key: 'grid',
@@ -714,7 +715,7 @@ const config = {
       key: 'products',
       listContainer: '.product-grid',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.1 },
+      params: { threshold: 0.1 },
       effects: [
         {
           key: 'products',
@@ -813,7 +814,7 @@ const config = {
       key: 'cards',
       trigger: 'viewEnter',
       listContainer: '.card-grid',
-      params: { type: 'once', threshold: 0.1 },
+      params: { threshold: 0.1 },
       sequences: [
         {
           offset: 80,
@@ -858,7 +859,6 @@ const config = {
       key: 'feed',
       trigger: 'viewEnter',
       listContainer: '.feed-items',
-      params: { type: 'repeat' },
       sequences: [
         {
           offset: 60,
@@ -867,6 +867,7 @@ const config = {
             {
               key: 'feed',
               listContainer: '.feed-items',
+              triggerType: 'repeat',
               keyframeEffect: {
                 name: 'feed-entrance',
                 keyframes: [

package/docs/guides/conditions-and-media-queries.md

@@ -230,7 +230,7 @@ const accessibleConfig: InteractConfig = {
       key: 'hero-title',
       trigger: 'viewEnter',
       conditions: ['motion-ok'],
-      params: { type: 'once', threshold: 0.3 },
+      params: { threshold: 0.3 },
       effects: [
         {
           key: 'hero-title',
@@ -252,7 +252,7 @@ const accessibleConfig: InteractConfig = {
       key: 'hero-title',
       trigger: 'viewEnter',
       conditions: ['motion-reduced'],
-      params: { type: 'once', threshold: 0.3 },
+      params: { threshold: 0.3 },
       effects: [
         {
           key: 'hero-title',
@@ -905,7 +905,6 @@ const navigationConfig: InteractConfig = {
       key: 'mobile-menu-toggle',
       trigger: 'click',
       conditions: ['mobile'],
-      params: { type: 'alternate' },
       effects: [
         {
           key: 'mobile-menu',

package/docs/guides/configuration-structure.md

@@ -29,9 +29,6 @@ Each interaction defines a complete cause-and-effect relationship:
     key: 'trigger-element',           // What element triggers the interaction
     selector: '.clickable-area',          // Optional: Custom selector within source
     trigger: 'hover',                     // What user action starts it
-    params: {                             // Optional trigger parameters
-        type: 'alternate'
-    },
     conditions: ['desktop-only'],         // Optional conditions to check
     effects: [                            // Array of effects to apply
         {
@@ -44,6 +41,8 @@ Each interaction defines a complete cause-and-effect relationship:
 }
 ```
 
+Time-based playback (`once`, `repeat`, `alternate`, `state`) is set with `triggerType` on each time effect, or with `triggerType` on a sequence object when using `sequences`. Optional `params` on the interaction are for observer options (`viewEnter` / `pageVisible`), pointer/`animationEnd` settings, and other non-playback trigger configuration.
+
 ## Element Selection with Selectors
 
 The `selector` property allows you to specify exactly which element should be used for interactions, instead of being limited to the first child element.
@@ -210,7 +209,7 @@ const complexConfig: InteractConfig = {
     {
       key: 'product-card',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.3 },
+      params: { threshold: 0.3 },
       effects: [
         {
           key: 'product-card',
@@ -343,7 +342,6 @@ export const cardInteractions = [
   {
     key: 'card',
     trigger: 'viewEnter',
-    params: { type: 'once' },
     effects: [{ key: 'card', effectId: 'card-entrance' }],
   },
 ];
@@ -500,7 +498,7 @@ const productPageConfig: InteractConfig = {
     {
       key: 'review-1',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.2 },
+      params: { threshold: 0.2 },
       effects: [
         {
           key: 'review-1',
@@ -512,7 +510,7 @@ const productPageConfig: InteractConfig = {
     {
       key: 'review-2',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.2 },
+      params: { threshold: 0.2 },
       effects: [
         {
           key: 'review-2',

package/docs/guides/effects-and-animations.md

@@ -72,7 +72,7 @@ For custom animations, use keyframe effects:
 {
     key: 'product-card',
     trigger: 'viewEnter',
-    params: { type: 'once', threshold: 0.3 },
+    params: { threshold: 0.3 },
     effects: [
         {
             keyframeEffect: {
@@ -227,7 +227,6 @@ For different timing per property:
 {
     key: 'theme-toggle',
     trigger: 'click',
-    params: { type: 'alternate' },
     effects: [
         {
             key: 'page-body',
@@ -514,7 +513,6 @@ Avoid animating:
 {
     key: 'app-loader',
     trigger: 'viewEnter',
-    params: { type: 'once' },
     effects: [
         {
             key: 'logo',
@@ -554,7 +552,7 @@ Avoid animating:
 {
     key: 'stats-section',
     trigger: 'viewEnter',
-    params: { type: 'once', threshold: 0.5 },
+    params: { threshold: 0.5 },
     effects: [
         {
             key: 'counter-1',

package/docs/guides/getting-started.md

@@ -277,7 +277,6 @@ Each effect defines:
 {
     key: 'my-button',
     trigger: 'click',
-    params: { method: 'toggle' },
     effects: [
         {
             key: 'my-content',

package/docs/guides/lists-and-dynamic-content.md

@@ -36,7 +36,7 @@ const config = {
       key: 'product-grid',
       listContainer: '.grid', // Container selector
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.1 },
+      params: { threshold: 0.1 },
       effects: [
         {
           key: 'product-grid',
@@ -123,7 +123,7 @@ Create sequential entrance animations for list items using delays:
     key: 'feature-list',
     listContainer: '.features',
     trigger: 'viewEnter',
-    params: { type: 'once', threshold: 0.2 },
+    params: { threshold: 0.2 },
     effects: [{
         key: 'feature-list',
         listContainer: '.features',
@@ -306,7 +306,7 @@ element.watchChildList('.dynamic-list');
     key: 'cards',
     listContainer: '.card-grid',
     trigger: 'viewEnter',
-    params: { type: 'once', threshold: 0.1 },
+    params: { threshold: 0.1 },
     effects: [{
         key: 'cards',
         listContainer: '.card-grid',
@@ -330,7 +330,7 @@ element.watchChildList('.dynamic-list');
     key: 'features',
     listContainer: '.feature-list',
     trigger: 'viewEnter',
-    params: { type: 'once', threshold: 0.2 },
+    params: { threshold: 0.2 },
     effects: [{
         key: 'features',
         listContainer: '.feature-list',
@@ -354,7 +354,7 @@ element.watchChildList('.dynamic-list');
     key: 'photos',
     listContainer: '.photo-grid',
     trigger: 'viewEnter',
-    params: { type: 'once', threshold: 0.15 },
+    params: { threshold: 0.15 },
     effects: [{
         key: 'photos',
         listContainer: '.photo-grid',
@@ -417,10 +417,11 @@ element.watchChildList('.dynamic-list');
     key: 'infinite-list',
     listContainer: '.items',
     trigger: 'viewEnter',
-    params: { type: 'repeat', threshold: 0.1 },
+    params: { threshold: 0.1 },
     effects: [{
         key: 'infinite-list',
         listContainer: '.items',
+        triggerType: 'repeat',
         keyframeEffect: {
             name: 'fade-slide',
             keyframes: [
@@ -586,7 +587,7 @@ const productGridConfig = {
       key: 'products',
       listContainer: '.product-grid',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.1 },
+      params: { threshold: 0.1 },
       effects: [
         {
           key: 'products',
@@ -649,11 +650,11 @@ const todoConfig = {
       key: 'todos',
       listContainer: '.todo-list',
       trigger: 'viewEnter',
-      params: { type: 'repeat' },
       effects: [
         {
           key: 'todos',
           listContainer: '.todo-list',
+          triggerType: 'repeat',
           keyframeEffect: {
             name: 'todo-add',
             keyframes: [
@@ -701,7 +702,7 @@ const galleryConfig = {
       key: 'gallery',
       listContainer: '.gallery-grid',
       trigger: 'viewEnter',
-      params: { type: 'once', threshold: 0.1 },
+      params: { threshold: 0.1 },
       effects: [
         {
           key: 'gallery',

package/docs/guides/sequences.md

@@ -163,8 +163,8 @@ Effects within a sequence can target different elements using the `key` property
 {
   key: 'trigger-element',
   trigger: 'click',
-  params: { type: 'alternate' },
   sequences: [{
+    triggerType: 'alternate',
     offset: 150,
     offsetEasing: 'sineOut',
     effects: [
@@ -191,7 +191,6 @@ When the source element connects, all existing list items are gathered and a Seq
   key: 'product-grid',
   trigger: 'viewEnter',
   listContainer: '.products',
-  params: { type: 'once' },
   sequences: [{
     offset: 80,
     offsetEasing: 'quadIn',
@@ -286,7 +285,7 @@ const config: InteractConfig = {
       key: 'cards',
       trigger: 'viewEnter',
       listContainer: '.card-grid',
-      params: { type: 'once', threshold: 0.1 },
+      params: { threshold: 0.1 },
       sequences: [
         {
           offset: 80,
@@ -326,9 +325,9 @@ const config: InteractConfig = {
     {
       key: 'reveal-btn',
       trigger: 'click',
-      params: { type: 'alternate' },
       sequences: [
         {
+          triggerType: 'alternate',
           offset: 150,
           offsetEasing: 'sineOut',
           effects: [

package/docs/guides/state-management.md

@@ -183,7 +183,6 @@ Create toggle behaviors using alternating states:
 {
     key: 'menu-button',
     trigger: 'click',
-    params: { type: 'alternate' },
     effects: [
         {
             key: 'mobile-menu',
@@ -315,7 +314,6 @@ Some states should persist across interactions:
 {
     key: 'theme-toggle',
     trigger: 'click',
-    params: { type: 'alternate' },
     effects: [
         {
             key: 'page-body',