# Announcement Bar: Set the closing animation using Custom CSS option

**URL:** <https://community.elfsight.com/t/announcement-bar-set-the-closing-animation-using-custom-css-option/46866>\
**Category:** New Feature\
**Tags:** announcement-bar\
**Created:** [April 10, 2024, 12:04pm UTC](https://community.elfsight.com/t/announcement-bar-set-the-closing-animation-using-custom-css-option/46866 "2024-04-10T12:04:54Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [April 10, 2024, 12:04pm UTC](https://community.elfsight.com/t/announcement-bar-set-the-closing-animation-using-custom-css-option/46866/1 "2024-04-10T12:04:54Z")

</div>

Guys, now you can set the closing animation in our [Announcement Bar](https://elfsight.com/announcement-bar-widget/) app using CSS codes 🚀

To interact with the widget in the open/closed state, you can use classes `es-announcement-bar-closed` / `es-announcement-bar-opened`

Here is an example of such a code - [Set Slide Up closing animation (Top Bar)](https://community.elfsight.com/t/set-slide-up-closing-animation-top-bar/46865)

  

Guys, if you’ve faced difficulties with the customization, describe your use case in the comments and we’ll be happy to assist 🙂

  

[Back to Changelog →](https://community.elfsight.com/c/elfsight-changelog/48)

---

<div class="post-metadata">

**Author:** ![GalacticNetwork](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/galacticnetwork/32/27225_2.png) [@GalacticNetwork](https://community.elfsight.com/u/GalacticNetwork)\
**Post date:** [April 10, 2024, 10:00pm UTC](https://community.elfsight.com/t/announcement-bar-set-the-closing-animation-using-custom-css-option/46866/2 "2024-04-10T22:00:38Z")

</div>

@Max Even though it has an animation, the animation does not work whatsoever on Google Sites for me.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [April 11, 2024, 8:27am UTC](https://community.elfsight.com/t/announcement-bar-set-the-closing-animation-using-custom-css-option/46866/3 "2024-04-11T08:27:25Z")

</div>

Hi @GalacticNetwork 👋

Yes, you are right! Due to the peculiarities of the Google Sites platforms, such elements are converted into iframe format. That’s why the animation won’t work correctly on Google Sites.

Feel free to ask if you have any questions left 🙂