Learn how to create custom label animation.
With Advanced Woo Labels PRO, it is possible to create label animations and customize various parameters for them.
When setting up label animations, you need to choose one from the predefined list of available options.
List of available animations
In most cases, the predefined options are more than enough. However, sometimes you might need to use a different animation. For example, a "Bounce Top" animation like this:
Custom animation for label
It is possible to create such custom label animations with some additional code snippets. Below, we will cover how to do that.
Let’s say we’ve decided to add the custom animation Bounce Top
.
Here are the steps to do that:
1. All label animations are created using CSS keyframes. So first, you need to define your custom animation in CSS. For our example, it will look like this:
@keyframes bounce-top { 0% { -webkit-transform: translateY(-45px); transform: translateY(-45px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 1; } 24% { opacity: 1; } 40% { -webkit-transform: translateY(-24px); transform: translateY(-24px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 65% { -webkit-transform: translateY(-12px); transform: translateY(-12px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 82% { -webkit-transform: translateY(-6px); transform: translateY(-6px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 93% { -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 25%, 55%, 75%, 87% { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } }
2. Now, when you know your needed animation styles, just use the following code snippets:
add_filter( 'awl_label_admin_options', 'my_awl_label_admin_options' ); function my_awl_label_admin_options( $options ) { if ( isset( $options['animation'] ) ) { foreach ( $options['animation'] as $key => $value ) { if ( isset( $value['id'] ) && $value['id'] === 'animation' ) { $options['animation'][$key]['choices']['awl-custom-bounce-top'] = __( 'Custom: Bounce top', 'advanced-woo-labels' ); } } } return $options; } add_action( 'wp_head', 'my_wp_head' ); add_action( 'admin_head', 'my_wp_head' ); function my_wp_head() { if ( is_admin() ) { $screen = get_current_screen(); if ( ! ( isset( $_GET['page'] ) && $_GET['page'] == 'awl-options' ) && ! ( $screen && $screen->post_type && $screen->post_type === 'awl-labels' ) ) { return; } } ?> <style> @keyframes awl-custom-bounce-top { 0% { -webkit-transform: translateY(-45px); transform: translateY(-45px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 1; } 24% { opacity: 1; } 40% { -webkit-transform: translateY(-24px); transform: translateY(-24px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 65% { -webkit-transform: translateY(-12px); transform: translateY(-12px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 82% { -webkit-transform: translateY(-6px); transform: translateY(-6px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 93% { -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 25%, 55%, 75%, 87% { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } } </style> <?php }
In our example, the custom animation has the slug awl-custom-bounce-top
. You can use any custom slug you like. Just make sure that the CSS keyframes and the PHP function both use the same animation slug.
Also, update the animation name to Custom: Bounce top
.
Add this code outside the plugin’s core files — for example, inside the functions.php
file of your child theme, or by using a custom code snippets plugin.
3. Now, we need to apply our new animation to the desired label. Open the label edit page, go to the Animation tab, and choose the newly created Custom: Bounce top
animation. Additionally, configure any other parameters as needed, then save your changes.
Choose custom animation for label
4. Finally, check your product label — the new animation should now be applied.
Label with custom animation