# Smooth transition

**URL:** <https://forums.realmacsoftware.com/t/smooth-transition/48055>\
**Category:** Elements\
**Created:** [June 15, 2025, 8:36am UTC](https://forums.realmacsoftware.com/t/smooth-transition/48055 "2025-06-15T08:36:02Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cyroscope](https://avatars.discourse-cdn.com/v4/letter/c/d9b06d/32.png) [@Cyroscope](https://forums.realmacsoftware.com/u/Cyroscope)\
**Post date:** [June 15, 2025, 8:36am UTC](https://forums.realmacsoftware.com/t/smooth-transition/48055/1 "2025-06-15T08:36:02Z")

</div>

Dear Elements community

Is it a way doing av smooth transition from a ”Hero” to the content while scrolling?

Like my old website:: [https://www.cyroscope.com/](https://www.cyroscope.com/)

Would be deeply grateful for advice .. 🙂

//Peter

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [June 16, 2025, 7:25am UTC](https://forums.realmacsoftware.com/t/smooth-transition/48055/2 "2025-06-16T07:25:34Z")

</div>

Hi @Cyroscope

You can achieve this effect in a couple of different ways, I’d most likely use a combination of the Reveal and Background components.

I’ve put together a simple demo project that replicates you site’s background and text overlay — [Download the project](elementsapp://downloadDocument/9lgwgfd2o1bd) and take a look 🙂

Once you have the project open in Elements simply preview it in the browser to see the smooth transition in action.

Hope that helps, and do let us know if you have any more questions 😃

 ![CleanShot 2025-06-16 at 09.19.13@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/9/a9b13d766df5cd09891d9224263df5a19744f132.jpeg)  
 ![CleanShot 2025-06-16 at 09.19.24@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/1/6/164063f4910f750d0d7b66976605f68a4d33b558.jpeg)

---

<div class="post-metadata">

**Author:** ![Cyroscope](https://avatars.discourse-cdn.com/v4/letter/c/d9b06d/32.png) [@Cyroscope](https://forums.realmacsoftware.com/u/Cyroscope)\
**Post date:** [June 16, 2025, 11:35am UTC](https://forums.realmacsoftware.com/t/smooth-transition/48055/3 "2025-06-16T11:35:08Z")

</div>

Thanks a lot Ben! 🙂

---

<div class="post-metadata">

**Author:** ![pumpkin](https://avatars.discourse-cdn.com/v4/letter/p/ccd318/32.png) [@pumpkin](https://forums.realmacsoftware.com/u/pumpkin)\
**Post date:** [June 16, 2025, 12:04pm UTC](https://forums.realmacsoftware.com/t/smooth-transition/48055/4 "2025-06-16T12:04:57Z")

</div>

I do believe he means the smooth fading effect when you scroll down the page to the … rather empty area with only the footer at the bottom.

---

<div class="post-metadata">

**Author:** ![Cyroscope](https://avatars.discourse-cdn.com/v4/letter/c/d9b06d/32.png) [@Cyroscope](https://forums.realmacsoftware.com/u/Cyroscope)\
**Post date:** [June 18, 2025, 1:56pm UTC](https://forums.realmacsoftware.com/t/smooth-transition/48055/5 "2025-06-18T13:56:33Z")

</div>

Dear Fynn! You’re right, but Ben managed to answer my next question regarding the animated image in advance. 🙂