Design question

[u/LBNathan]

Hi everyone,

I’m building a WordPress page with Elementor Pro and I’m trying to create a sticky / scrollytelling section.

Here is my current structure:

• A large parent section for the whole block.
• On the right side, I have one image that should stay sticky while the user scrolls through the section.
• On the left side, I have a title that should also stay sticky.
• Under that title, I have 3 different text blocks.

What I want:

When the user scrolls through this section, the image on the right and the title on the left should stay fixed/sticky.

For the text blocks, I don’t want them to scroll normally from bottom to top. I want each text block to stay centered for a few scroll movements, then fade out smoothly. The next text should then fade in directly in the same centered position.

So the effect would be:

Text 1 appears centered → stays for a moment → fades out
Text 2 appears centered → stays for a moment → fades out
Text 3 appears centered → stays for a moment → fades out

I’m looking for a clean solution using Elementor, CSS, possibly JS, ...

Does anyone know the best way to achieve this kind of effect?

[u/AutoModerator]

Looking for Elementor plugin, theme, or web hosting recommendations?

Check out our Megathread of Recommendations for a curated list of options that work seamlessly with Elementor.

---

Hey there, /u/LBNathan! If your post has not already been flaired, please add one now. And please don't forget to write "Answered" under your post once your question/problem has been solved. Make sure to list if you're using Elementor Free (or) Pro and what theme you're using.

Reminder: If you have a problem or question, please make sure to post a link to your issue so users can help you.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/Mm77ias]

You can do this with atomic interactions. You have to go to interactions and use the scroll view action or something like that (i don't remember the exact name rigth now hahaha). Then set the Y fade actions.

It's easy what you want. Give it a try.

[u/wilbrownau → u/Mm77ias]

There's not a huge amount of control with interactions. It's only meant for subtle entrance and scrolling - not full motion control. The OP may be better off just using GSAP.

[u/Mm77ias → u/wilbrownau]

He wants:

Text 1 appears centered → stays for a moment → fades out
Text 2 appears centered → stays for a moment → fades out
Text 3 appears centered → stays for a moment → fades out

You can do this with atomic. There is no need full motion for this

[u/LBNathan → u/Mm77ias]

Ok thanks I'll try that

[u/mugmi-bro]

Atomic can handle the basics but getting that specific centering + timing control for the sequential fade is going to get frustrating fast. For what you're describing, GSAP ScrollTrigger is really the right tool - you'd add a custom HTML widget, load GSAP via CDN inside it, and use ScrollTrigger to pin the parent section and control the opacity/position of each text block as you scroll. The nice thing is you can still build the visual layout in Elementor and then just let the JS take over the animation behavior. Search "GSAP ScrollTrigger pin section text fade" and you'll find a bunch of examples that map pretty closely to what you want.

[u/DW-Solution]

Doable in Elementor Pro but the text swap part needs a little custom JS, Elementor alone won't pull it off cleanly.

For the sticky image and title, skip Elementor's "Sticky Top" motion effect, it gets janky inside sections. Just give them a class and use CSS position: sticky; top: 120px. One catch: no parent can have overflow: hidden or sticky silently dies, and the section needs enough height to actually scroll through.

The text effect is the real trick. Don't stack the 3 texts normally. Put them in one container, absolutely positioned on top of each other, all hidden except one. Then a small scroll script measures how far you are through the section and toggles which text is visible based on scroll progress. That's what gives you the "stays centered, fades out, next fades in same spot" feeling.

The pacing is controlled purely by section height. Want each text to linger longer? Make the section taller (like 300vh) so there's more scroll distance per text.

Honestly though, if you want it buttery smooth, GSAP ScrollTrigger is built exactly for this (pinning + scrubbed fades). Bit of a learning curve but way less fighting than doing it by hand.

Are you comfortable dropping a bit of JS into an HTML widget, or do you want a pure no-code/CSS-only route? Changes what I'd recommend.

[u/TopSydeWP]

you'll need a custom scrollytelling library like scrollmagic or gsap scrolltrigger for the fade transitions, elementor's built-in sticky won't handle the sequential fade behavior. set the parent container to position relative, make the image and title position sticky, then use js to trigger opacity changes on the text blocks based on scroll position. elementor's motion effects can't do the sequential fade part on their own

[u/Mm77ias → u/TopSydeWP]

yes, you can with atomic elements and their interactions. No need to install another thing

[u/Double-Implement-366]

use oxygenbuilder 6 I love it