Fadeout on scroll

Elements How do I…
1

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.

2

@elementsbot can you help Chris here to soon!

3

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

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):

<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!
  • 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 :man_dancing::sparkles:

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

4

Here?

Screenshot 2025-08-20 alle 19.36.05
Screenshot 2025-08-20 alle 19.36.05610×506 19.7 KB

the link Check out the Reveal docs here! don’t work.

Thanks

5

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