GET FREE VERSION GET THE PRO VERSION

Label Animations

Add animations to any labels to attract more user attention.

In this article
Following article describes features available only with PRO plugin version.

Overview

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 pulsate animation

Label with shake animation

Label with shake animation

Also you can apply animation to label text instead of to whole label.

Label with heartbeat animation

Label with heartbeat animation

Below, we will cover how to create such animations.

How to set animation for a label

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

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

Label preview box with animation

Custom animations

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

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.