> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Interactions

## Article: Interactions

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/interactions.md

## Article Content:

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";


# Interactions
<blockquote className="caution">

__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.

</blockquote>


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`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/editor-element.md) and in [`elements`](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/elements.md) of type `inlineElement`.

## Interactions properties

Each `interactions` object accepts the following properties:

<PropertyList bordered>
  <Property
    name="triggers"
    type="AllowedTrigger[]"
    required
    description="Animation and interaction triggers that this element supports."
  >
    <ExpandableSection name="AllowedTrigger values">
      Each trigger corresponds to a specific type of animation experience.

      <PropertyList>
        <Property name="'viewEnter'" description="Triggers when the component enters the viewport. Use for fade-in, slide-in, and other entrance effects." />
        <Property name="'viewProgress'" description="Triggers based on scroll position relative to the viewport. Use for scroll-driven animations." />
        <Property name="'pageVisible'" description="Triggers when the page becomes visible. Use for infinite-loop and continuous animations." />
        <Property name="'pointerMove'" description="Triggers on pointer movement over the element. Use for mouse-tracking effects." />
        <Property name="'animationEnd'" description="Triggers when an animation completes. Use only when the component has both 'viewEnter' and an ongoing trigger like 'pageVisible', to chain the entrance into a continuous animation." />
      </PropertyList>
    </ExpandableSection>
  </Property>
  <Property
    name="effectGroups"
    type="EffectGroup[]"
    description="Specifies which part of the component animation effects apply to. If omitted, effects apply to the entire component."
  >
    <ExpandableSection name="EffectGroup values">
      <PropertyList>
        <Property name="'background'" description="Effects are applied to the component's background layer. Use for containers and media components." />
      </PropertyList>
    </ExpandableSection>
  </Property>
</PropertyList>

## Examples

### Full interaction support

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

```typescript
editorElement: {
  interactions: {
    triggers: [
      'viewEnter',
      'pageVisible',
      'animationEnd',
      'viewProgress',
      'pointerMove',
    ],
  },
}
```

### 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.

```typescript
editorElement: {
  interactions: {
    triggers: [
      'viewEnter',
      'viewProgress',
    ],
  },
}
```

### 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.

```typescript
editorElement: {
  archetype: 'Container',
  interactions: {
    triggers: [
      'viewEnter',
      'pageVisible',
      'animationEnd',
      'viewProgress',
      'pointerMove',
    ],
    effectGroups: ['background'],
  },
  data: {
    children: {
      dataType: 'container',
      container: {
        selector: '.content',
        containerType: 'simple',
        simple: {},
      },
    },
  },
}
```

### 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.

```typescript
editorElement: {
  archetype: 'Image',
  interactions: {
    triggers: [
      'viewEnter',
      'pageVisible',
      'animationEnd',
      'pointerMove',
      'viewProgress',
    ],
    effectGroups: ['background'],
  },
}
```

## See also

- [About the Manifest](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/about-the-manifest.md)