Add animations to any labels to attract more user attention.
Advanced Woo Labels PRO provides many more options to customize product labels and grab users' attention.
One such feature is the ability to set animations for each label.
Label with pulsate animation
Label with shake animation
Also you can apply animation to label text instead of to whole label.
Label with heartbeat animation
Below, we will cover how to create such animations.
To create label animations, simply open the label edit page and switch to the Animation tab. Here, you can find all related options.
Label animation options
Animation - the type of animation. Select from the list of predefined options. Default - None
.
Apply to - Choose to what block to apply animation - whole label or only label text. Default - Label block
Duration - the duration of one animation cycle. Default - 2000ms
.
Repeats number - the number of animation repeats. Default - 1
.
Infinite - runs the animation an infinite number of times. Overrides the Repeats number option. Default - false
.
Delay - delay before starting the animation. Default - 0ms
.
Now, just set the desired animation type and its parameters. Then save your changes and check your label — the label animation should be immediately visible.
Also, note that the animation is visible right inside the preview window, so you can see how it looks before publishing any changes on the live site.
Label preview box with animation
Need to use animations that aren't included in the predefined list? No problem — you can create your own custom animations.
Label custom animation select
To create custom label animations, you’ll need to use some additional code snippets. Learn more about this here: Create Custom Animations for Labels.