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.

Adding animation to the announcement bar in Announcer
Adding animation to the announcement bar in Announcer

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.

Adding animation to call to action buttons in Announcer PRO
Adding animation to call to action buttons in Announcer PRO

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.

Subscribe to our Newsletter

Get updates on the WordPress plugins, tips and tricks to enhance your WordPress experience. No spam. View newsletter

Add your comment No Comments so far

By using this website, you agree to our Terms

Share