Interactions

Alpha: Editor React Components are currently in alpha. This feature is subject to change and may have bugs, issues, and limitations. We're actively improving it based on your feedback.

The interactions property controls which animation options appear in the editor's animation panel. It's configured with the following 2 concepts:

  • Triggers: Define when an animation starts, such as when the component enters the viewport or as the site visitor scrolls.
  • Effect groups: Define what animates, such as just the background layer while the content stays static.

Where to define

You can define interactions in editorElement and in elements of type inlineElement.

Interactions properties

Each interactions object accepts the following properties:

triggersAllowedTrigger[]Required

Animation and interaction triggers that this element supports.


effectGroupsEffectGroup[]

Specifies which part of the component animation effects apply to. If omitted, effects apply to the entire component.

Examples

Full interaction support

Use when you want to give Wix users access to all animation types. Good default for most components.

Copy

Entrance and scroll only

Use for components that should animate in and respond to scrolling, but don't need looping or mouse-tracking. Good for static content like headings, cards, or badges.

Copy

Container with background effects

Use for sections or wrappers where the background should animate independently of the content inside. The 'background' effect group targets just the background layer.

Copy

Media component with background effects

Use for image or video components where the media itself should animate. The 'background' effect group applies effects to the media layer.

Copy

See also

Did this help?