Animations

Animate blocks to enhance the user experience.

Animations are an effective way to increase user engagement and enhance the visual appeal of your website. By using animated blocks, you can highlight content, improve the flow of reading, and create a dynamic user experience. Here, you'll learn how to animate blocks in the Shopping Experiences using the CMS Bundle.

What are animated blocks?

Animated blocks are content that are activated by various motion effects during page load or scrolling. They not only give the website a modern aesthetic but also help to highlight important information and actions.

How to Configure Animation Settings

1. Select Block: Choose the block you want to animate and open the advanced block settings of the CMS Bundle.

2. Configure Animations: Under Animations, you will find the settings that you can apply to the block.

Basic Settings

Setting	Description
Animation Type	The different types of animation (zoom, flip, fade, ...)
Behavior	The behavior determines the dynamics of the animation. For example, you can choose a fast start but a slower end for the animation.

Advanced Animation Settings

When clicking on the button for advanced animation settings, a popup appears with additional configuration options.

Setting	Description
Animation Display	The general behavior of the animation
Animation Duration	How long it takes for the animation to fully complete (in milliseconds).
Animation Delay	Set the delay for the start of the animation in milliseconds.
Anchor Point (Advanced)	When the specified selector becomes visible, the block's animation will be triggered. This allows you to create interdependent content.