# Weird animation on the banner

**URL:** <https://forums.realmacsoftware.com/t/weird-animation-on-the-banner/53055>\
**Category:** Elements\
**Created:** [December 7, 2025, 1:12pm UTC](https://forums.realmacsoftware.com/t/weird-animation-on-the-banner/53055 "2025-12-07T13:12:09Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![numericcitizen](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/numericcitizen/32/26930_2.png) [@numericcitizen](https://forums.realmacsoftware.com/u/numericcitizen)\
**Post date:** [December 7, 2025, 1:12pm UTC](https://forums.realmacsoftware.com/t/weird-animation-on-the-banner/53055/1 "2025-12-07T13:12:09Z")

</div>

If you visit my personal landing page: [https://whois.numericcitizen.me,](https://whois.numericcitizen.me) pay attention to the banner at the top: it first appears, then disappears and then slides down.

The expected behaviour is to have the banner gently slide down… how do I fix that? I’m using the Reveal component. Here are the parameters:

 ![Cleanshot - Who Is Numeric Citizen.elements@2025-12-07@08.11.50@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/5/9/59ea92332fb33331856fddfc4511e5ed25684ceb.png)

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [December 7, 2025, 1:25pm UTC](https://forums.realmacsoftware.com/t/weird-animation-on-the-banner/53055/2 "2025-12-07T13:25:51Z")

</div>

![CleanShot 2025-12-07 at 1 .25.13@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/3/a34f5be8ce035f054bcd637080fc3ac7becf8aef.png)

---

<div class="post-metadata">

**Author:** ![numericcitizen](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/numericcitizen/32/26930_2.png) [@numericcitizen](https://forums.realmacsoftware.com/u/numericcitizen)\
**Post date:** [December 7, 2025, 1:41pm UTC](https://forums.realmacsoftware.com/t/weird-animation-on-the-banner/53055/3 "2025-12-07T13:41:47Z")

</div>

Mmmmm… I made the change, in preview mode, see how it behaves in [this video](https://cloud.numericcitizen.me/cjYPpxwX)… you’ll that the banner shows up a fraction of a second before doing the animation.

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [December 7, 2025, 2:05pm UTC](https://forums.realmacsoftware.com/t/weird-animation-on-the-banner/53055/4 "2025-12-07T14:05:35Z")

</div>

the live site seems ok

---

<div class="post-metadata">

**Author:** ![numericcitizen](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/numericcitizen/32/26930_2.png) [@numericcitizen](https://forums.realmacsoftware.com/u/numericcitizen)\
**Post date:** [December 7, 2025, 2:12pm UTC](https://forums.realmacsoftware.com/t/weird-animation-on-the-banner/53055/5 "2025-12-07T14:12:52Z")

</div>

No, it’s not. The image appears, then disappear and then the slide in occurs… I’m using ARC Browser…

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [December 7, 2025, 2:51pm UTC](https://forums.realmacsoftware.com/t/weird-animation-on-the-banner/53055/6 "2025-12-07T14:51:53Z")

</div>

try adding this to your page css window:

```css

[data-reveal] {
  visibility: hidden;
}

```

It’s a race going on for the javascript to kick in when the page loads. You elements in the reveal are not hidden until the js kicks in then the js hides them before commencing the animation.

This should work for you. @ben should probably re-visit the Reveal component, and make the elements start out as hidden in preview and publish.

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [December 7, 2025, 3:07pm UTC](https://forums.realmacsoftware.com/t/weird-animation-on-the-banner/53055/7 "2025-12-07T15:07:13Z")

</div>

Also the image in the banner loads slow with an empty cache, so maybe optimise the image, and also set the fetch priority to high.

 ![CleanShot 2025-12-07 at 3 .05.32@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/4/f/4fa04424810a3af4370a3378a3ef89dba960af81.png)

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [December 7, 2025, 3:30pm UTC](https://forums.realmacsoftware.com/t/weird-animation-on-the-banner/53055/8 "2025-12-07T15:30:58Z")

</div>

same in safari Firefox and duckduck

what I see is who is numeric citizen left on the screen

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [December 7, 2025, 3:52pm UTC](https://forums.realmacsoftware.com/t/weird-animation-on-the-banner/53055/9 "2025-12-07T15:52:15Z")

</div>

The issue is real, “if” the connection is slow, or the order and speed of loading different elements differs, from browser to browser. Put a breakpoint in the inspector on the reveal element, and you will see that on initial load the banner is visible. It’s visible until the js loads and hides it before commencing the animation.
