@wix/interact 1.92.0 → 2.0.0-rc.2

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.
Files changed (179) hide show
  1. package/dist/cjs/index.js +2 -23
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/react.js +15 -0
  4. package/dist/cjs/react.js.map +1 -0
  5. package/dist/cjs/web.js +2 -0
  6. package/dist/cjs/web.js.map +1 -0
  7. package/dist/es/index.js +8 -0
  8. package/dist/es/index.js.map +1 -0
  9. package/dist/es/react.js +650 -0
  10. package/dist/es/react.js.map +1 -0
  11. package/dist/es/web.js +56 -0
  12. package/dist/es/web.js.map +1 -0
  13. package/dist/index-C8QxOkui.mjs +7940 -0
  14. package/dist/index-C8QxOkui.mjs.map +1 -0
  15. package/dist/index-DEPRHaUt.js +18 -0
  16. package/dist/index-DEPRHaUt.js.map +1 -0
  17. package/dist/tsconfig.build.tsbuildinfo +1 -0
  18. package/dist/types/core/Interact.d.ts +17 -7
  19. package/dist/types/core/Interact.d.ts.map +1 -0
  20. package/dist/types/core/InteractionController.d.ts +19 -0
  21. package/dist/types/core/InteractionController.d.ts.map +1 -0
  22. package/dist/types/core/add.d.ts +4 -3
  23. package/dist/types/core/add.d.ts.map +1 -0
  24. package/dist/types/core/css.d.ts +3 -0
  25. package/dist/types/core/css.d.ts.map +1 -0
  26. package/dist/types/core/remove.d.ts +3 -1
  27. package/dist/types/core/remove.d.ts.map +1 -0
  28. package/dist/types/core/utilities.d.ts +1 -0
  29. package/dist/types/core/utilities.d.ts.map +1 -0
  30. package/dist/types/dom/api.d.ts +3 -0
  31. package/dist/types/dom/api.d.ts.map +1 -0
  32. package/dist/types/handlers/animationEnd.d.ts +3 -2
  33. package/dist/types/handlers/animationEnd.d.ts.map +1 -0
  34. package/dist/types/handlers/click.d.ts +3 -2
  35. package/dist/types/handlers/click.d.ts.map +1 -0
  36. package/dist/types/handlers/hover.d.ts +3 -2
  37. package/dist/types/handlers/hover.d.ts.map +1 -0
  38. package/dist/types/handlers/index.d.ts +1 -0
  39. package/dist/types/handlers/index.d.ts.map +1 -0
  40. package/dist/types/handlers/pointerMove.d.ts +3 -2
  41. package/dist/types/handlers/pointerMove.d.ts.map +1 -0
  42. package/dist/types/handlers/utilities.d.ts +1 -0
  43. package/dist/types/handlers/utilities.d.ts.map +1 -0
  44. package/dist/types/handlers/viewEnter.d.ts +3 -2
  45. package/dist/types/handlers/viewEnter.d.ts.map +1 -0
  46. package/dist/types/handlers/viewProgress.d.ts +4 -3
  47. package/dist/types/handlers/viewProgress.d.ts.map +1 -0
  48. package/dist/types/index.d.ts +3 -2
  49. package/dist/types/index.d.ts.map +1 -0
  50. package/dist/types/react/Interaction.d.ts +10 -0
  51. package/dist/types/react/Interaction.d.ts.map +1 -0
  52. package/dist/types/react/index.d.ts +8 -0
  53. package/dist/types/react/index.d.ts.map +1 -0
  54. package/dist/types/react/interactRef.d.ts +3 -0
  55. package/dist/types/react/interactRef.d.ts.map +1 -0
  56. package/dist/types/types.d.ts +25 -10
  57. package/dist/types/types.d.ts.map +1 -0
  58. package/dist/types/utils.d.ts +4 -2
  59. package/dist/types/utils.d.ts.map +1 -0
  60. package/dist/types/{InteractElement.d.ts → web/InteractElement.d.ts} +115 -77
  61. package/dist/types/web/InteractElement.d.ts.map +1 -0
  62. package/dist/types/web/defineInteractElement.d.ts +2 -0
  63. package/dist/types/web/defineInteractElement.d.ts.map +1 -0
  64. package/dist/types/web/index.d.ts +6 -0
  65. package/dist/types/web/index.d.ts.map +1 -0
  66. package/docs/README.md +211 -0
  67. package/docs/advanced/README.md +164 -0
  68. package/docs/api/README.md +157 -0
  69. package/docs/api/element-selection.md +607 -0
  70. package/docs/api/functions.md +638 -0
  71. package/docs/api/interact-class.md +663 -0
  72. package/docs/api/interact-element.md +565 -0
  73. package/docs/api/interaction-controller.md +450 -0
  74. package/docs/api/types.md +957 -0
  75. package/docs/examples/README.md +212 -0
  76. package/docs/examples/click-interactions.md +977 -0
  77. package/docs/examples/entrance-animations.md +935 -0
  78. package/docs/examples/hover-effects.md +930 -0
  79. package/docs/examples/list-patterns.md +737 -0
  80. package/docs/guides/README.md +49 -0
  81. package/docs/guides/conditions-and-media-queries.md +1068 -0
  82. package/docs/guides/configuration-structure.md +726 -0
  83. package/docs/guides/custom-elements.md +327 -0
  84. package/docs/guides/effects-and-animations.md +634 -0
  85. package/docs/guides/getting-started.md +379 -0
  86. package/docs/guides/lists-and-dynamic-content.md +713 -0
  87. package/docs/guides/state-management.md +747 -0
  88. package/docs/guides/understanding-triggers.md +690 -0
  89. package/docs/integration/README.md +264 -0
  90. package/docs/integration/react.md +605 -0
  91. package/package.json +73 -56
  92. package/rules/Integration.md +255 -0
  93. package/rules/click-rules.md +533 -0
  94. package/rules/full-lean.md +346 -0
  95. package/rules/hover-rules.md +593 -0
  96. package/rules/pointermove-rules.md +1341 -0
  97. package/rules/scroll-list-rules.md +900 -0
  98. package/rules/viewenter-rules.md +1015 -0
  99. package/rules/viewprogress-rules.md +1044 -0
  100. package/dist/cjs/InteractElement.js +0 -162
  101. package/dist/cjs/InteractElement.js.map +0 -1
  102. package/dist/cjs/__tests__/interact.spec.js +0 -1930
  103. package/dist/cjs/__tests__/interact.spec.js.map +0 -1
  104. package/dist/cjs/__tests__/viewEnter.spec.js +0 -207
  105. package/dist/cjs/__tests__/viewEnter.spec.js.map +0 -1
  106. package/dist/cjs/core/Interact.js +0 -257
  107. package/dist/cjs/core/Interact.js.map +0 -1
  108. package/dist/cjs/core/add.js +0 -246
  109. package/dist/cjs/core/add.js.map +0 -1
  110. package/dist/cjs/core/remove.js +0 -35
  111. package/dist/cjs/core/remove.js.map +0 -1
  112. package/dist/cjs/core/utilities.js +0 -16
  113. package/dist/cjs/core/utilities.js.map +0 -1
  114. package/dist/cjs/external-types.d.js +0 -2
  115. package/dist/cjs/external-types.d.js.map +0 -1
  116. package/dist/cjs/handlers/animationEnd.js +0 -33
  117. package/dist/cjs/handlers/animationEnd.js.map +0 -1
  118. package/dist/cjs/handlers/click.js +0 -116
  119. package/dist/cjs/handlers/click.js.map +0 -1
  120. package/dist/cjs/handlers/hover.js +0 -141
  121. package/dist/cjs/handlers/hover.js.map +0 -1
  122. package/dist/cjs/handlers/index.js +0 -32
  123. package/dist/cjs/handlers/index.js.map +0 -1
  124. package/dist/cjs/handlers/pointerMove.js +0 -49
  125. package/dist/cjs/handlers/pointerMove.js.map +0 -1
  126. package/dist/cjs/handlers/utilities.js +0 -49
  127. package/dist/cjs/handlers/utilities.js.map +0 -1
  128. package/dist/cjs/handlers/viewEnter.js +0 -127
  129. package/dist/cjs/handlers/viewEnter.js.map +0 -1
  130. package/dist/cjs/handlers/viewProgress.js +0 -65
  131. package/dist/cjs/handlers/viewProgress.js.map +0 -1
  132. package/dist/cjs/test-types.d.js +0 -2
  133. package/dist/cjs/test-types.d.js.map +0 -1
  134. package/dist/cjs/types.js +0 -2
  135. package/dist/cjs/types.js.map +0 -1
  136. package/dist/cjs/utils.js +0 -68
  137. package/dist/cjs/utils.js.map +0 -1
  138. package/dist/esm/InteractElement.js +0 -156
  139. package/dist/esm/InteractElement.js.map +0 -1
  140. package/dist/esm/__tests__/interact.spec.js +0 -1937
  141. package/dist/esm/__tests__/interact.spec.js.map +0 -1
  142. package/dist/esm/__tests__/viewEnter.spec.js +0 -210
  143. package/dist/esm/__tests__/viewEnter.spec.js.map +0 -1
  144. package/dist/esm/core/Interact.js +0 -251
  145. package/dist/esm/core/Interact.js.map +0 -1
  146. package/dist/esm/core/add.js +0 -241
  147. package/dist/esm/core/add.js.map +0 -1
  148. package/dist/esm/core/remove.js +0 -30
  149. package/dist/esm/core/remove.js.map +0 -1
  150. package/dist/esm/core/utilities.js +0 -14
  151. package/dist/esm/core/utilities.js.map +0 -1
  152. package/dist/esm/external-types.d.js +0 -2
  153. package/dist/esm/external-types.d.js.map +0 -1
  154. package/dist/esm/handlers/animationEnd.js +0 -29
  155. package/dist/esm/handlers/animationEnd.js.map +0 -1
  156. package/dist/esm/handlers/click.js +0 -116
  157. package/dist/esm/handlers/click.js.map +0 -1
  158. package/dist/esm/handlers/hover.js +0 -141
  159. package/dist/esm/handlers/hover.js.map +0 -1
  160. package/dist/esm/handlers/index.js +0 -27
  161. package/dist/esm/handlers/index.js.map +0 -1
  162. package/dist/esm/handlers/pointerMove.js +0 -48
  163. package/dist/esm/handlers/pointerMove.js.map +0 -1
  164. package/dist/esm/handlers/utilities.js +0 -43
  165. package/dist/esm/handlers/utilities.js.map +0 -1
  166. package/dist/esm/handlers/viewEnter.js +0 -129
  167. package/dist/esm/handlers/viewEnter.js.map +0 -1
  168. package/dist/esm/handlers/viewProgress.js +0 -61
  169. package/dist/esm/handlers/viewProgress.js.map +0 -1
  170. package/dist/esm/index.js +0 -5
  171. package/dist/esm/index.js.map +0 -1
  172. package/dist/esm/test-types.d.js +0 -2
  173. package/dist/esm/test-types.d.js.map +0 -1
  174. package/dist/esm/types.js +0 -2
  175. package/dist/esm/types.js.map +0 -1
  176. package/dist/esm/utils.js +0 -63
  177. package/dist/esm/utils.js.map +0 -1
  178. package/dist/types/__tests__/interact.spec.d.ts +0 -1
  179. package/dist/types/__tests__/viewEnter.spec.d.ts +0 -0
@@ -1,25 +1,21 @@
1
- import type { StateParams } from './types';
1
+ import type { IInteractionController, StateParams } from '../types';
2
2
  export declare const INTERACT_EFFECT_DATA_ATTR = "interactEffect";
3
3
  export declare function getInteractElement(): {
4
4
  new (): {
5
5
  _internals: (ElementInternals & {
6
6
  states: Set<string>;
7
7
  }) | null;
8
- connected: boolean;
9
- sheet: CSSStyleSheet | null;
10
- _observers: WeakMap<HTMLElement, MutationObserver>;
8
+ controller: IInteractionController;
11
9
  connectedCallback(): void;
12
10
  disconnectedCallback(): void;
13
- disconnect(): void;
14
11
  connect(key?: string): void;
15
- renderStyle(cssRules: string[]): void;
16
- toggleEffect(effectId: string, method: StateParams['method'], item?: HTMLElement | null): void;
12
+ disconnect(): void;
13
+ toggleEffect(effectId: string, method: StateParams["method"], item?: HTMLElement | null): void;
17
14
  getActiveEffects(): string[];
18
- watchChildList(listContainer: string): void;
19
- _childListChangeHandler(listContainer: string, entries: MutationRecord[]): void;
20
15
  accessKey: string;
21
16
  readonly accessKeyLabel: string;
22
17
  autocapitalize: string;
18
+ autocorrect: boolean;
23
19
  dir: string;
24
20
  draggable: boolean;
25
21
  hidden: boolean;
@@ -32,30 +28,39 @@ export declare function getInteractElement(): {
32
28
  readonly offsetTop: number;
33
29
  readonly offsetWidth: number;
34
30
  outerText: string;
31
+ popover: string | null;
35
32
  spellcheck: boolean;
36
33
  title: string;
37
34
  translate: boolean;
35
+ writingSuggestions: string;
38
36
  attachInternals(): ElementInternals;
39
37
  click(): void;
40
- addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
41
- addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
42
- removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
43
- removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
38
+ hidePopover(): void;
39
+ showPopover(): void;
40
+ togglePopover(options?: boolean): boolean;
41
+ addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
42
+ addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
43
+ removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
44
+ removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
44
45
  readonly attributes: NamedNodeMap;
45
- readonly classList: DOMTokenList;
46
+ get classList(): DOMTokenList;
47
+ set classList(value: string);
46
48
  className: string;
47
49
  readonly clientHeight: number;
48
50
  readonly clientLeft: number;
49
51
  readonly clientTop: number;
50
52
  readonly clientWidth: number;
53
+ readonly currentCSSZoom: number;
51
54
  id: string;
55
+ innerHTML: string;
52
56
  readonly localName: string;
53
57
  readonly namespaceURI: string | null;
54
58
  onfullscreenchange: ((this: Element, ev: Event) => any) | null;
55
59
  onfullscreenerror: ((this: Element, ev: Event) => any) | null;
56
60
  outerHTML: string;
57
61
  readonly ownerDocument: Document;
58
- readonly part: DOMTokenList;
62
+ get part(): DOMTokenList;
63
+ set part(value: string);
59
64
  readonly prefix: string | null;
60
65
  readonly scrollHeight: number;
61
66
  scrollLeft: number;
@@ -65,9 +70,12 @@ export declare function getInteractElement(): {
65
70
  slot: string;
66
71
  readonly tagName: string;
67
72
  attachShadow(init: ShadowRootInit): ShadowRoot;
68
- closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
69
- closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
73
+ checkVisibility(options?: CheckVisibilityOptions): boolean;
74
+ closest<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | null;
75
+ closest<K extends keyof SVGElementTagNameMap>(selector: K): SVGElementTagNameMap[K] | null;
76
+ closest<K extends keyof MathMLElementTagNameMap>(selector: K): MathMLElementTagNameMap[K] | null;
70
77
  closest<E extends Element = Element>(selectors: string): E | null;
78
+ computedStyleMap(): StylePropertyMapReadOnly;
71
79
  getAttribute(qualifiedName: string): string | null;
72
80
  getAttributeNS(namespace: string | null, localName: string): string | null;
73
81
  getAttributeNames(): string[];
@@ -76,40 +84,47 @@ export declare function getInteractElement(): {
76
84
  getBoundingClientRect(): DOMRect;
77
85
  getClientRects(): DOMRectList;
78
86
  getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
79
- getElementsByTagName<K_4 extends keyof HTMLElementTagNameMap>(qualifiedName: K_4): HTMLCollectionOf<HTMLElementTagNameMap[K_4]>;
80
- getElementsByTagName<K_5 extends keyof SVGElementTagNameMap>(qualifiedName: K_5): HTMLCollectionOf<SVGElementTagNameMap[K_5]>;
87
+ getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
88
+ getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;
89
+ getElementsByTagName<K extends keyof MathMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<MathMLElementTagNameMap[K]>;
90
+ getElementsByTagName<K extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K]>;
81
91
  getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
82
92
  getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
83
93
  getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
94
+ getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1998/Math/MathML", localName: string): HTMLCollectionOf<MathMLElement>;
84
95
  getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
96
+ getHTML(options?: GetHTMLOptions): string;
85
97
  hasAttribute(qualifiedName: string): boolean;
86
98
  hasAttributeNS(namespace: string | null, localName: string): boolean;
87
99
  hasAttributes(): boolean;
88
100
  hasPointerCapture(pointerId: number): boolean;
89
101
  insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
90
- insertAdjacentHTML(position: InsertPosition, text: string): void;
102
+ insertAdjacentHTML(position: InsertPosition, string: string): void;
91
103
  insertAdjacentText(where: InsertPosition, data: string): void;
92
104
  matches(selectors: string): boolean;
93
105
  releasePointerCapture(pointerId: number): void;
94
106
  removeAttribute(qualifiedName: string): void;
95
107
  removeAttributeNS(namespace: string | null, localName: string): void;
96
108
  removeAttributeNode(attr: Attr): Attr;
97
- requestFullscreen(options?: FullscreenOptions | undefined): Promise<void>;
98
- requestPointerLock(): void;
99
- scroll(options?: ScrollToOptions | undefined): void;
109
+ requestFullscreen(options?: FullscreenOptions): Promise<void>;
110
+ requestPointerLock(options?: PointerLockOptions): Promise<void>;
111
+ scroll(options?: ScrollToOptions): void;
100
112
  scroll(x: number, y: number): void;
101
- scrollBy(options?: ScrollToOptions | undefined): void;
113
+ scrollBy(options?: ScrollToOptions): void;
102
114
  scrollBy(x: number, y: number): void;
103
- scrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void;
104
- scrollTo(options?: ScrollToOptions | undefined): void;
115
+ scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
116
+ scrollTo(options?: ScrollToOptions): void;
105
117
  scrollTo(x: number, y: number): void;
106
118
  setAttribute(qualifiedName: string, value: string): void;
107
119
  setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
108
120
  setAttributeNode(attr: Attr): Attr | null;
109
121
  setAttributeNodeNS(attr: Attr): Attr | null;
122
+ setHTMLUnsafe(html: string): void;
110
123
  setPointerCapture(pointerId: number): void;
111
- toggleAttribute(qualifiedName: string, force?: boolean | undefined): boolean;
124
+ toggleAttribute(qualifiedName: string, force?: boolean): boolean;
112
125
  webkitMatchesSelector(selectors: string): boolean;
126
+ get textContent(): string;
127
+ set textContent(value: string | null);
113
128
  readonly baseURI: string;
114
129
  readonly childNodes: NodeListOf<ChildNode>;
115
130
  readonly firstChild: ChildNode | null;
@@ -122,67 +137,78 @@ export declare function getInteractElement(): {
122
137
  readonly parentElement: HTMLElement | null;
123
138
  readonly parentNode: ParentNode | null;
124
139
  readonly previousSibling: ChildNode | null;
125
- textContent: string | null;
126
140
  appendChild<T extends Node>(node: T): T;
127
- cloneNode(deep?: boolean | undefined): Node;
141
+ cloneNode(subtree?: boolean): Node;
128
142
  compareDocumentPosition(other: Node): number;
129
143
  contains(other: Node | null): boolean;
130
- getRootNode(options?: GetRootNodeOptions | undefined): Node;
144
+ getRootNode(options?: GetRootNodeOptions): Node;
131
145
  hasChildNodes(): boolean;
132
- insertBefore<T_1 extends Node>(node: T_1, child: Node | null): T_1;
146
+ insertBefore<T extends Node>(node: T, child: Node | null): T;
133
147
  isDefaultNamespace(namespace: string | null): boolean;
134
148
  isEqualNode(otherNode: Node | null): boolean;
135
149
  isSameNode(otherNode: Node | null): boolean;
136
150
  lookupNamespaceURI(prefix: string | null): string | null;
137
151
  lookupPrefix(namespace: string | null): string | null;
138
152
  normalize(): void;
139
- removeChild<T_2 extends Node>(child: T_2): T_2;
140
- replaceChild<T_3 extends Node>(node: Node, child: T_3): T_3;
141
- readonly ATTRIBUTE_NODE: number;
142
- readonly CDATA_SECTION_NODE: number;
143
- readonly COMMENT_NODE: number;
144
- readonly DOCUMENT_FRAGMENT_NODE: number;
145
- readonly DOCUMENT_NODE: number;
146
- readonly DOCUMENT_POSITION_CONTAINED_BY: number;
147
- readonly DOCUMENT_POSITION_CONTAINS: number;
148
- readonly DOCUMENT_POSITION_DISCONNECTED: number;
149
- readonly DOCUMENT_POSITION_FOLLOWING: number;
150
- readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number;
151
- readonly DOCUMENT_POSITION_PRECEDING: number;
152
- readonly DOCUMENT_TYPE_NODE: number;
153
- readonly ELEMENT_NODE: number;
154
- readonly ENTITY_NODE: number;
155
- readonly ENTITY_REFERENCE_NODE: number;
156
- readonly NOTATION_NODE: number;
157
- readonly PROCESSING_INSTRUCTION_NODE: number;
158
- readonly TEXT_NODE: number;
153
+ removeChild<T extends Node>(child: T): T;
154
+ replaceChild<T extends Node>(node: Node, child: T): T;
155
+ readonly ELEMENT_NODE: 1;
156
+ readonly ATTRIBUTE_NODE: 2;
157
+ readonly TEXT_NODE: 3;
158
+ readonly CDATA_SECTION_NODE: 4;
159
+ readonly ENTITY_REFERENCE_NODE: 5;
160
+ readonly ENTITY_NODE: 6;
161
+ readonly PROCESSING_INSTRUCTION_NODE: 7;
162
+ readonly COMMENT_NODE: 8;
163
+ readonly DOCUMENT_NODE: 9;
164
+ readonly DOCUMENT_TYPE_NODE: 10;
165
+ readonly DOCUMENT_FRAGMENT_NODE: 11;
166
+ readonly NOTATION_NODE: 12;
167
+ readonly DOCUMENT_POSITION_DISCONNECTED: 1;
168
+ readonly DOCUMENT_POSITION_PRECEDING: 2;
169
+ readonly DOCUMENT_POSITION_FOLLOWING: 4;
170
+ readonly DOCUMENT_POSITION_CONTAINS: 8;
171
+ readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
172
+ readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
159
173
  dispatchEvent(event: Event): boolean;
174
+ ariaActiveDescendantElement: Element | null;
160
175
  ariaAtomic: string | null;
161
176
  ariaAutoComplete: string | null;
177
+ ariaBrailleLabel: string | null;
178
+ ariaBrailleRoleDescription: string | null;
162
179
  ariaBusy: string | null;
163
180
  ariaChecked: string | null;
164
181
  ariaColCount: string | null;
165
182
  ariaColIndex: string | null;
166
183
  ariaColIndexText: string | null;
167
184
  ariaColSpan: string | null;
185
+ ariaControlsElements: ReadonlyArray<Element> | null;
168
186
  ariaCurrent: string | null;
187
+ ariaDescribedByElements: ReadonlyArray<Element> | null;
188
+ ariaDescription: string | null;
189
+ ariaDetailsElements: ReadonlyArray<Element> | null;
169
190
  ariaDisabled: string | null;
191
+ ariaErrorMessageElements: ReadonlyArray<Element> | null;
170
192
  ariaExpanded: string | null;
193
+ ariaFlowToElements: ReadonlyArray<Element> | null;
171
194
  ariaHasPopup: string | null;
172
195
  ariaHidden: string | null;
173
196
  ariaInvalid: string | null;
174
197
  ariaKeyShortcuts: string | null;
175
198
  ariaLabel: string | null;
199
+ ariaLabelledByElements: ReadonlyArray<Element> | null;
176
200
  ariaLevel: string | null;
177
201
  ariaLive: string | null;
178
202
  ariaModal: string | null;
179
203
  ariaMultiLine: string | null;
180
204
  ariaMultiSelectable: string | null;
181
205
  ariaOrientation: string | null;
206
+ ariaOwnsElements: ReadonlyArray<Element> | null;
182
207
  ariaPlaceholder: string | null;
183
208
  ariaPosInSet: string | null;
184
209
  ariaPressed: string | null;
185
210
  ariaReadOnly: string | null;
211
+ ariaRelevant: string | null;
186
212
  ariaRequired: string | null;
187
213
  ariaRoleDescription: string | null;
188
214
  ariaRowCount: string | null;
@@ -197,33 +223,35 @@ export declare function getInteractElement(): {
197
223
  ariaValueNow: string | null;
198
224
  ariaValueText: string | null;
199
225
  role: string | null;
200
- animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
201
- getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
202
- after(...nodes: (string | Node)[]): void;
203
- before(...nodes: (string | Node)[]): void;
226
+ animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation;
227
+ getAnimations(options?: GetAnimationsOptions): Animation[];
228
+ after(...nodes: (Node | string)[]): void;
229
+ before(...nodes: (Node | string)[]): void;
204
230
  remove(): void;
205
- replaceWith(...nodes: (string | Node)[]): void;
206
- innerHTML: string;
231
+ replaceWith(...nodes: (Node | string)[]): void;
207
232
  readonly nextElementSibling: Element | null;
208
233
  readonly previousElementSibling: Element | null;
209
234
  readonly childElementCount: number;
210
235
  readonly children: HTMLCollection;
211
236
  readonly firstElementChild: Element | null;
212
237
  readonly lastElementChild: Element | null;
213
- append(...nodes: (string | Node)[]): void;
214
- prepend(...nodes: (string | Node)[]): void;
215
- querySelector<K_6 extends keyof HTMLElementTagNameMap>(selectors: K_6): HTMLElementTagNameMap[K_6] | null;
216
- querySelector<K_7 extends keyof SVGElementTagNameMap>(selectors: K_7): SVGElementTagNameMap[K_7] | null;
217
- querySelector<E_1 extends Element = Element>(selectors: string): E_1 | null;
218
- querySelectorAll<K_8 extends keyof HTMLElementTagNameMap>(selectors: K_8): NodeListOf<HTMLElementTagNameMap[K_8]>;
219
- querySelectorAll<K_9 extends keyof SVGElementTagNameMap>(selectors: K_9): NodeListOf<SVGElementTagNameMap[K_9]>;
220
- querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
221
- replaceChildren(...nodes: (string | Node)[]): void;
238
+ append(...nodes: (Node | string)[]): void;
239
+ prepend(...nodes: (Node | string)[]): void;
240
+ querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
241
+ querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
242
+ querySelector<K extends keyof MathMLElementTagNameMap>(selectors: K): MathMLElementTagNameMap[K] | null;
243
+ querySelector<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): HTMLElementDeprecatedTagNameMap[K] | null;
244
+ querySelector<E extends Element = Element>(selectors: string): E | null;
245
+ querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
246
+ querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
247
+ querySelectorAll<K extends keyof MathMLElementTagNameMap>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
248
+ querySelectorAll<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): NodeListOf<HTMLElementDeprecatedTagNameMap[K]>;
249
+ querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
250
+ replaceChildren(...nodes: (Node | string)[]): void;
222
251
  readonly assignedSlot: HTMLSlotElement | null;
223
- oncopy: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
224
- oncut: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
225
- onpaste: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
226
- readonly style: CSSStyleDeclaration;
252
+ readonly attributeStyleMap: StylePropertyMap;
253
+ get style(): CSSStyleDeclaration;
254
+ set style(cssText: string);
227
255
  contentEditable: string;
228
256
  enterKeyHint: string;
229
257
  inputMode: string;
@@ -233,17 +261,23 @@ export declare function getInteractElement(): {
233
261
  onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
234
262
  onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
235
263
  onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
236
- onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
264
+ onauxclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
237
265
  onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
266
+ onbeforematch: ((this: GlobalEventHandlers, ev: Event) => any) | null;
267
+ onbeforetoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null;
238
268
  onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
239
269
  oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
240
270
  oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
241
271
  oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
242
272
  onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
243
- onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
273
+ onclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
244
274
  onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
245
- oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
275
+ oncontextlost: ((this: GlobalEventHandlers, ev: Event) => any) | null;
276
+ oncontextmenu: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
277
+ oncontextrestored: ((this: GlobalEventHandlers, ev: Event) => any) | null;
278
+ oncopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
246
279
  oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
280
+ oncut: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
247
281
  ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
248
282
  ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
249
283
  ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
@@ -276,6 +310,7 @@ export declare function getInteractElement(): {
276
310
  onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
277
311
  onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
278
312
  onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
313
+ onpaste: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
279
314
  onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
280
315
  onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
281
316
  onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -286,12 +321,14 @@ export declare function getInteractElement(): {
286
321
  onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
287
322
  onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
288
323
  onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
324
+ onpointerrawupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
289
325
  onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
290
- onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent<EventTarget>) => any) | null;
326
+ onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null;
291
327
  onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
292
328
  onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
293
329
  onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
294
330
  onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
331
+ onscrollend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
295
332
  onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
296
333
  onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
297
334
  onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -303,7 +340,7 @@ export declare function getInteractElement(): {
303
340
  onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
304
341
  onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
305
342
  ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
306
- ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
343
+ ontoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null;
307
344
  ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
308
345
  ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
309
346
  ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
@@ -321,9 +358,10 @@ export declare function getInteractElement(): {
321
358
  onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
322
359
  autofocus: boolean;
323
360
  readonly dataset: DOMStringMap;
324
- nonce?: string | undefined;
361
+ nonce?: string;
325
362
  tabIndex: number;
326
363
  blur(): void;
327
- focus(options?: FocusOptions | undefined): void;
364
+ focus(options?: FocusOptions): void;
328
365
  };
329
366
  };
367
+ //# sourceMappingURL=InteractElement.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InteractElement.d.ts","sourceRoot":"","sources":["../../../src/web/InteractElement.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGpE,eAAO,MAAM,yBAAyB,mBAAmB,CAAC;AAE1D,wBAAgB,kBAAkB;;oBAKlB,CAAC,gBAAgB,GAAG;YAAE,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;SAAE,CAAC,GAAG,IAAI;oBACnD,sBAAsB;;;sBAiCpB,MAAM;;+BAYG,MAAM,UAAU,WAAW,CAAC,QAAQ,CAAC,SAAS,WAAW,GAAG,IAAI;4BA0BnE,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAS/B"}
@@ -0,0 +1,2 @@
1
+ export declare function defineInteractElement(): boolean;
2
+ //# sourceMappingURL=defineInteractElement.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"defineInteractElement.d.ts","sourceRoot":"","sources":["../../../src/web/defineInteractElement.ts"],"names":[],"mappings":"AAEA,wBAAgB,qBAAqB,YASpC"}
@@ -0,0 +1,6 @@
1
+ import { Interact } from '../core/Interact';
2
+ export { add, remove } from '../dom/api';
3
+ export { generate } from '../core/css';
4
+ export { Interact };
5
+ export * from '../types';
6
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/web/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAI5C,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,CAAC;AAEpB,cAAc,UAAU,CAAC"}
package/docs/README.md ADDED
@@ -0,0 +1,211 @@
1
+ # @wix/interact Documentation
2
+
3
+ Welcome to the complete documentation for the `@wix/interact` package - a powerful, declarative interaction library for creating engaging web animations and effects.
4
+
5
+ ## Package Entry Points
6
+
7
+ | Entry Point | Use Case | Key Exports |
8
+ |-------------|----------|-------------|
9
+ | `@wix/interact/react` | React applications | `Interact`, `generate`, `Interaction` |
10
+ | `@wix/interact/web` | Web Components | `Interact`, `generate` |
11
+ | `@wix/interact` | Vanilla JS | `Interact`, `add`, `remove`, `generate` |
12
+
13
+ ## Table of Contents
14
+
15
+ ### **API Reference**
16
+ Complete reference documentation for all classes, methods, and types.
17
+
18
+ - [**Core API**](api/README.md) - Main classes and functions
19
+ - [Interact Class](api/interact-class.md) - Main interaction manager
20
+ - [InteractionController](api/interaction-controller.md) - Controller class for element interactions
21
+ - [Standalone Functions](api/functions.md) - `add()`, `remove()`, `generate()`, `addListItems()`, `removeListItems()`
22
+ - [Custom Element](api/interact-element.md) - `<interact-element>` API
23
+ - [Element Selection](api/element-selection.md) - Selection priority and patterns
24
+ - [**Type Definitions**](api/types.md) - Complete TypeScript interfaces
25
+ - [Configuration Types](api/types.md#configuration-types) - `InteractConfig`, `Interaction`, `Effect`
26
+ - [Controller Types](api/types.md#controller-and-element-types) - `IInteractionController`, `IInteractElement`
27
+ - [Trigger Types](api/types.md#trigger-types) - All trigger parameters and types
28
+ - [Effect Types](api/types.md#effect-types) - Time, scrub, and transition effects
29
+ - [React Types](api/types.md#react-types) - `InteractRef` and React-specific types
30
+
31
+ ### **Guides & Tutorials**
32
+ Learn the concepts and patterns for building effective interactions.
33
+
34
+ - [**Getting Started**](guides/getting-started.md) - Your first interaction in 5 minutes
35
+ - [**Core Concepts**](guides/README.md) - Understanding the interaction system
36
+ - [Understanding Triggers](guides/understanding-triggers.md) - When interactions happen
37
+ - [Working with Effects](guides/effects-and-animations.md) - What happens during interactions
38
+ - [Configuration Structure](guides/configuration-structure.md) - Organizing complex interactions
39
+ - [Custom Elements](guides/custom-elements.md) - How `interact-element` works
40
+ - [Lists and Dynamic Content](guides/lists-and-dynamic-content.md) - Working with repeating elements
41
+ - [State Management](guides/state-management.md) - CSS states vs data attributes
42
+ - [Conditions & Media Queries](guides/conditions-and-media-queries.md) - Responsive interactions
43
+ - [**Performance**](guides/performance.md) - Optimization tips and best practices
44
+
45
+ ### **Examples & Patterns**
46
+ Practical examples and common interaction patterns.
47
+
48
+ - [**Basic Examples**](examples/README.md) - Simple, copy-paste examples
49
+ - [Entrance Animations](examples/entrance-animations.md) - Viewport-triggered effects
50
+ - [Click Interactions](examples/click-interactions.md) - User-triggered actions
51
+ - [Hover Effects](examples/hover-effects.md) - Mouse interaction patterns
52
+ - [Scroll Animations](examples/scroll-animations.md) - Progress-based effects
53
+ - [List Patterns](examples/list-patterns.md) - 20+ list and grid animation patterns
54
+ - [**Advanced Patterns**](examples/advanced-patterns.md) - Complex interaction sequences
55
+ - [**Real-world Examples**](examples/real-world.md) - Production-ready implementations
56
+
57
+ ### **Integration Guides**
58
+ Framework-specific integration and migration guides.
59
+
60
+ - [**Framework Integration**](integration/README.md) - Using with different frameworks
61
+ - [React Integration](integration/react.md) - `Interaction` component, `createInteractRef`, hooks
62
+ - [Vanilla JavaScript](integration/vanilla-js.md) - Direct DOM usage
63
+ - [Other Frameworks](integration/other-frameworks.md) - Vue, Angular, Svelte, etc.
64
+ - [**Migration Guides**](integration/migration.md) - Coming from other libraries
65
+ - [**Testing**](integration/testing.md) - Testing interaction behaviors
66
+ - [**Debugging**](integration/debugging.md) - Development tools and techniques
67
+
68
+ ### **Advanced Topics**
69
+ Deep-dive technical documentation for power users.
70
+
71
+ - [**Architecture**](advanced/architecture.md) - System design and decisions
72
+ - [**Custom Triggers**](advanced/custom-triggers.md) - Building your own triggers
73
+ - [**Browser Compatibility**](advanced/browser-support.md) - Polyfills and fallbacks
74
+ - [**Performance Deep Dive**](advanced/performance-optimization.md) - Advanced optimization
75
+ - [**Contributing**](advanced/contributing.md) - Development and contribution guide
76
+
77
+ ## Quick Navigation
78
+
79
+ ### I want to...
80
+
81
+ **Get started quickly**
82
+ → [Getting Started Guide](guides/getting-started.md)
83
+
84
+ **Use with React**
85
+ → [React Integration](integration/react.md)
86
+
87
+ **Understand the concepts**
88
+ → [Core Concepts](guides/README.md)
89
+
90
+ **See code examples**
91
+ → [Examples & Patterns](examples/README.md)
92
+
93
+ **Look up API details**
94
+ → [API Reference](api/README.md)
95
+
96
+ **Integrate with my framework**
97
+ → [Integration Guides](integration/README.md)
98
+
99
+ **Debug an issue**
100
+ → [Debugging Guide](integration/debugging.md)
101
+
102
+ **Optimize performance**
103
+ → [Performance Guide](guides/performance.md)
104
+
105
+ **Extend functionality**
106
+ → [Advanced Topics](advanced/README.md)
107
+
108
+ ## Quick Start
109
+
110
+ ### React
111
+
112
+ ```tsx
113
+ import { useEffect } from 'react';
114
+ import { Interact, Interaction } from '@wix/interact/react';
115
+
116
+ const config = {
117
+ interactions: [{
118
+ key: 'card',
119
+ trigger: 'hover',
120
+ effects: [{
121
+ keyframeEffect: {
122
+ name: 'lift',
123
+ keyframes: [{ transform: 'translateY(-4px)' }]
124
+ },
125
+ duration: 200
126
+ }]
127
+ }],
128
+ effects: {}
129
+ };
130
+
131
+ function App() {
132
+ useEffect(() => {
133
+ const instance = Interact.create(config);
134
+ return () => instance.destroy();
135
+ }, []);
136
+
137
+ return (
138
+ <Interaction tagName="div" interactKey="card" className="card">
139
+ <h2>Hover me!</h2>
140
+ </Interaction>
141
+ );
142
+ }
143
+ ```
144
+
145
+ ### Web Components
146
+
147
+ ```html
148
+ <interact-element data-interact-key="card">
149
+ <div class="card">
150
+ <h2>Hover me!</h2>
151
+ </div>
152
+ </interact-element>
153
+ ```
154
+
155
+ ```javascript
156
+ import { Interact } from '@wix/interact/web';
157
+
158
+ Interact.create({
159
+ interactions: [{
160
+ key: 'card',
161
+ trigger: 'hover',
162
+ effects: [{
163
+ keyframeEffect: {
164
+ name: 'lift',
165
+ keyframes: [{ transform: 'translateY(-4px)' }]
166
+ },
167
+ duration: 200
168
+ }]
169
+ }],
170
+ effects: {}
171
+ });
172
+ ```
173
+
174
+ ### Vanilla JS
175
+
176
+ ```html
177
+ <div class="card" data-interact-key="nice-card">
178
+ <h2>Hover me!</h2>
179
+ </div>
180
+ ```
181
+
182
+ ```javascript
183
+ import { Interact, add } from '@wix/interact';
184
+
185
+ const niceCard = document.querySelector('[data-interact-key="nice-card"]');
186
+
187
+ add(niceCard);
188
+
189
+ Interact.create({
190
+ interactions: [{
191
+ key: 'nice-card',
192
+ trigger: 'hover',
193
+ effects: [{
194
+ keyframeEffect: {
195
+ name: 'lift',
196
+ keyframes: [{ transform: 'translateY(-4px)' }]
197
+ },
198
+ duration: 200
199
+ }]
200
+ }],
201
+ effects: {}
202
+ });
203
+ ```
204
+
205
+ ## Version Information
206
+
207
+ This documentation is for `@wix/interact` v1.0.0. For earlier versions or migration information, see the [Migration Guide](integration/migration.md).
208
+
209
+ ## Feedback
210
+
211
+ Found an issue with the documentation? Please [open an issue](https://github.com/wix-incubator/wow-libs/issues) or contribute improvements via pull request.