Available for e-Detailers and their briefs, portfolio e-Detailers, and banners
With the animation feature, you can add dynamic effects to your content item components. Configure the animation effects for the component entrance, emphasis, or exit on the layout. To animate the component:
Add the required component to the layout and select it.
Go to the
Animationstab.Click
+ ADD ANIMATION.
Select the required animation:
Entrance—to set the component animation for the slide/banner opening.Emphasis—to set the animation for the component standing out on the slide/banner.Exit—to set the component animation for the slide/banner exit.
To manage the selected animation, use the following controls:
Control | Action |
 | Unfold the animation settings |
 | Play back the animation effect applied to the component on the layout |
 | Remove the animation |
5. Unfold the selected animation settings.
6. Customize the following:
TYPE: Choose the animation effect type and the way of its realization.
Banners
You can preview an animation effect on the banner layout by hovering over it in the TYPE dropdown list. This preview doesn't affect any animation already applied to the banner component.
EVENT: Select the required animation trigger—SlideenterorClick.DURATION: Define the animation duration value in seconds.DELAY: Set the animation delay value in seconds.REPEAT: Select the number of times the animation repeats.
You can also view the animation applied to the e-Detailer components in the Editor PREVIEW mode.
Animation timeline
Available for banners
Contact your administrator to configure the animation timeline.
The timeline gives you a visual overview of all animations in your banner and allows you to review, adjust, and preview them in real time.
Before using the timeline to preview and adjust the banner animations, create a banner, open it in Editor, add components, and assign animation effects to them.
To open the banner animation timeline in Editor, click the button on the bottom bar.
The timeline opens below the banner layout.
Elements without animations display the No animation label in their row on the duration track.
The timeline consists of the following areas:
[1] Header with the banner type.
[2] Playback panel with the timeline ruler and following controls:
Control | Action |
| Start the animation preview from the current playhead position. During playback, the playhead moves along the timeline ruler. |
Pause the playback. | |
Return the playhead to the beginning and stop playback. | |
| Show the playhead time position/total banner animation duration in seconds. |
Timeline ruler—the horizontal ruler across the top of the duration track with time markers in seconds. It provides a reference scale for all duration blocks and animations displayed on the track.
[3] Elements panel
The panel with all banner elements—blocks, containers, and components—in a hierarchical tree view, along with animations assigned to them. Containers appear as parent rows with nested child components. You can collapse containers by clicking the button to reduce visual noise or expand them to review child components along with their animations.
[4] Duration track
The panel with duration blocks for each component and animation, aligned to the timeline ruler. Each element appears as a separate row.
To add animations to the banner elements:
Click the required element row on the timeline, the elements panel, or directly on the layout. The element is highlighted in blue across all three locations.
Go to the Animations tab.
Click
+ ADD ANIMATIONand select an animation type—Entrance,Emphasis, orExit.The animation is applied to the element and appears as a nested animation block under the element row on the duration track. Repeat for each element you want to animate.
You can apply multiple animations to a single element. The element duration block automatically adjusts to the interval from the first animation start to the last animation end.
To change animation duration:
Select the required element with its animation on the duration track.
Hover over the left or right edge of the selected element until the resize cursor appears.
Drag the edge to adjust the start or end time. A vertical guide line appears on the adjusted side to help you align the duration precisely.
Drop to apply. The timeline and preview update immediately.
To move the animation:
Select an animation block on the duration track.
Drag it horizontally to the required position within the component duration. Vertical guide lines appear on both sides for alignment.
Drop to apply the new position.
Inherited animations and animation repeats are displayed as transparent blocks and you can't move or resize them. To edit an inherited animation, select the parent component where it was originally assigned.
In the playback panel, click
to start the animation preview from the current playhead position. The playhead moves along the timeline ruler as the animation plays.
EDIT mode
In the
EDITmode, selecting a component on the layout or timeline while playback is running stops the animation and moves the playhead to 0.0 s.Click
to stop at the required moment.
Click
to return the playhead to the beginning and stop playback.
To review a specific moment, drag the playhead to the required position on the timeline ruler or click the position directly.
PREVIEW mode
In the
PREVIEWmode, the timeline displays only the playback panel with thePlay,Pause, andRestartcontrols along with the timeline ruler. Playback starts automatically when you switch to thePREVIEWmode.
To switch between size-specific banners and preview the animation on their timelines, use the and
navigation arrows on the bottom bar in Editor. The timeline updates immediately to reflect the element hierarchy and animation for the selected size. Review and adjust animations for each size as needed.
