How to Add Animation to Announcements in WordPress

Adding a notification bar would be the first step to sharing a message with your visitors.

What if you can enhance this notification bar by adding small animations or transition effects?

In this article, I will use the Announcer WordPress plugin and show how to add a notification bar with transition effects.

Announcer is a popular WordPress plugin, packed with all the features you need to add a notification bar. It is available for free in the WordPress repository. You can also upgrade to the PRO version for even more features.

Adding Animation to a Notification Bar #

If you haven’t added a notification bar using Announcer, you can follow the article “Displaying announcement bar in WordPress” guide for step-by-step instructions. Though you can add basic transition effects in the free version, I have used the PRO version to fully utilize all the features provided.

Before we configure the settings, let’s see the elements to which you can add effects. You can add transition effect to,

• Announcement bar
• Call-To-Action buttons

Once you have added the announcement bar, head over to the announcement edit page.

Under the settings section, switch to the “Display” tab. Here you can change the transition effect to add when the announcement bar appears on the screen. There are various effects like Slide, Fade, Back, Bounce, and Zoom.

Similarly, you can configure the transition effect for the announcement bar when it is closed. You can find this under the “Close” tab.

Adding Effects to the Call-To-Action Buttons #

To add effects to the Call-To-Action buttons, switch to the “Call-To-Actions” tab.

For every button, you will find an option called “Animation”. Select the effect you want to add to that button.

Next to that option, you can find the setting to “Repeat the animation”. Select how long you want the animation to repeat.

Hit publish and save the announcement bar. The announcement bar will now appear with the effects you have configured.

Conclusion #

When you add an animation/transition effect, it is obviously better than a static-looking element.

With the Announcer plugin, we saw how easy it was to add a transition effect to the notification bar.

If you have any comments, please feel free to share them in the comments section below.