# Fadeout on scroll

**URL:** <https://forums.realmacsoftware.com/t/fadeout-on-scroll/49981>\
**Category:** Elements\
**Created:** [August 20, 2025, 11:53am UTC](https://forums.realmacsoftware.com/t/fadeout-on-scroll/49981 "2025-08-20T11:53:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Invisigoth](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/invisigoth/32/29525_2.png) [@Invisigoth](https://forums.realmacsoftware.com/u/Invisigoth)\
**Post date:** [August 20, 2025, 11:53am UTC](https://forums.realmacsoftware.com/t/fadeout-on-scroll/49981/1 "2025-08-20T11:53:30Z")

</div>

Hi, is there a possibility, when I use the reveal component, to scroll with a fade out of an element?

I need to fade out a text or image to create a smoon elegant scroll navigation.

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\
**Post date:** [August 20, 2025, 3:09pm UTC](https://forums.realmacsoftware.com/t/fadeout-on-scroll/49981/2 "2025-08-20T15:09:59Z")

</div>

@elementsbot can you help Chris here to soon!

---

<div class="post-metadata">

**Author:** ![elementsbot](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/elementsbot/32/33134_2.png) [@elementsbot](https://forums.realmacsoftware.com/u/elementsbot)\
**Post date:** [August 20, 2025, 3:10pm UTC](https://forums.realmacsoftware.com/t/fadeout-on-scroll/49981/3 "2025-08-20T15:10:14Z")

</div>

Hey Chris! (And thanks for the summon, Paul 👋)

You absolutely _can_ achieve a fade-out-on-scroll effect in RapidWeaver Elements using the Reveal animation system—though there’s a little trickery involved.

### Here’s How to Do It

1. **Select the Element** (text, image, etc.) you want to fade out.
2. Under **Advanced → Attributes** in the Inspector, add these custom attributes:
  - `data-reveal`
  - `data-reveal-animation="fadeUpIn"` (for how it appears)
  - `data-reveal-exit-animation="fadeUpOut"` (this is the magic—fade out as you scroll past)
  - `data-reveal-play="enter-exit"` (plays animation both on enter and exit)
  - Optionally, tweak `data-reveal-distance`, `data-reveal-duration`, etc., for timing.

#### Example (for custom/HTML components):

```html
<div
  data-reveal
  data-reveal-animation="fadeUpIn"
  data-reveal-exit-animation="fadeUpOut"
  data-reveal-play="enter-exit"
>
  <!-- Your text or image goes here -->
</div>

```

**If you’re working visually (not with code), just use the “Reveal” properties in the sidebar Inspector and look for the animation options. Set “Exit Animation” to `fadeUpOut` or `fadeDownOut` (whatever direction you vibe with).**

* * *

### Quick Tips:

- Want it even fancier? Tweak **distance** or **easing** for smoother movement.
- Need the full techy cheat sheet? [Check out the Reveal docs here!](https://docs.realmacsoftware.com/elements-docs/built-in-components/reveal)
- If you get weird horizontal scroll on iPhone, set the parent “overflow” to Hidden. (Don’t ask how I know, I’m just very ~experienced~.)

Let me know if you need step-by-step instructions, or if you want a full .properties file example—you know I live for those.

Happy animating!  
—Elements Bot 🕺✨

_(Now, back to my regularly scheduled daydreaming about websites with zero code…)_

---

<div class="post-metadata">

**Author:** ![Invisigoth](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/invisigoth/32/29525_2.png) [@Invisigoth](https://forums.realmacsoftware.com/u/Invisigoth)\
**Post date:** [August 20, 2025, 5:36pm UTC](https://forums.realmacsoftware.com/t/fadeout-on-scroll/49981/4 "2025-08-20T17:36:54Z")

</div>

Here?

 ![Screenshot 2025-08-20 alle 19.36.05](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/4/d/4dde491faf68d81ac3d84f3c2ffd5a7d9fa44434.png)

the link [Check out the Reveal docs here!](https://docs.realmacsoftware.com/elements-docs/built-in-components/reveal) don’t work.

Thanks

---

<div class="post-metadata">

**Author:** ![Invisigoth](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/invisigoth/32/29525_2.png) [@Invisigoth](https://forums.realmacsoftware.com/u/Invisigoth)\
**Post date:** [August 20, 2025, 9:11pm UTC](https://forums.realmacsoftware.com/t/fadeout-on-scroll/49981/5 "2025-08-20T21:11:38Z")

</div>

Great… work… OMG!

Just a question, I create a custom component with a dropzone, if I put something (es. an image) into my custom component, I see it in the preview and everything works fine, but the image disappears from the page layout panel, why?

Thanks