Make this Stacked Card Scrolling Effect/Animation in Elementor | WordPress Creative Text Box Design

Today I'll show you, how to make this Stacked Card Scrolling Effect/Animation in Elementor and Design this WordPress Creative Text Box.

✅Get Elementor Pro:

✅Get code snippet for Stacked Card Scrolling Effect:

✅Get this as Ready Template (✨1 CLICK INSTALL✨):

In this tutorial, I’ll show you how you can make the stacked card design on your Elementor website. So, when you scroll down, the card start to go away and the next one will show up at the very top. Also when you scroll up, they again start to come back to the right place. You can make a beautiful services section or portfolio section design by following this tutorial.

If you want, you can get this animated card effect as a ready template from my template shop. Here as a bonus, you'll get both the container and non-container versions. But, if you don't want this templates, you can also start it from scratch.

First, we need to create a nested container structure and inside that create 2 columns. On the left, let's put some content and on the right we'll create our main scroll animation section.

Inside each box, you can add any content you want. Here, I've added some heading widgets and design them. Then, duplicate it for creating multiple boxes. Make sure to set their position absolute to keep them at the same place.

Finally, to create the effect we need to add some classes and custom codes. Also check it's responsiveness on the tablet and mobile devices.

So, that's how you can make this scrolling text box in WordPress. If you enjoy this tips and tricks tutorial, cool effects and want to get more creative and advanced design, don't forget to like and subscribe.

[fransouza]

Guys, for those who are having problems with the section not sticking, you should click on the section or container where the cards are and click on advanced > movement effects > sticky > top > stay in column > yes, and if necessary, insert padding in that container so that it doesn't stop on top of the cards.

I also placed the javascript code in the wordpress panel > Elementor > custom code.

And thank you very much to the creator of this channel, I love your tutorials, very creative and different. 💖

[gelamegeneishvili]

Hope you are doing well, Your channel is so underrated my friend, you are a great help to every WordPress developer.

[carolinedoliveira]

For those who are having the same problem as me: The design was stuck at the bottom of the page. There is a way to solve this very simply, just align the items of the child container to the center! That way you can use the VH in 100 without bugs! Worked form me! Hope i helped! And Thanks, man! Your content is just great!!!

[muchlovebymel]

This is so fun!! Love getting to see videos like this to help remind me of just how HUGE elementor is for creative opportunities.

[GhostiePostie]

Worked perfectly for me in 2024. Amazing value add, thank you sir!

[kke-cn]

That's a very great video! Thanks bro. For the guys who meet the left container doesn't stay sticky, I solved it by making a little change by adding a css in the css code snippet.

selector{
--card-scroll-height: 400;
--card-rotate: 12;
--flex-direction: column; <!-- adding this line of code in your custom css which shows in Make's blog-->
}

[mirsb]

Hi, amazing tutorial, but there is a slight problem, the cards dont move as they should with the mouse abd the left side is sticked at the bottom.
can you help me out.

[GoofyAssName]

Spectacular video yet again! In the future, please make a tutorial on how to make a scroll-through video (a background video that plays once you scroll down the page). Stay safe and thanks again!!!

[mrstrange]

you make the best and i mean the best, website guides by far. and for free, you are the best.

[raisulislam]

Fantastic Video! But for me the section that holds these cards is disapprearing without showing all the cards. If would be better if the screen is pause scrolling when the card section is visible. And when users is scrolling instead of scrolling the page, it just changes the card. ANd once all the cards are done revealing the screen can scroll again for the viewer.

Hope to hear from you.

[emanoelrocha]

AMAZING! Simple like that. Você é um dos mais incríveis que já vi. Thank you so much, from Brasil!!!

[CarlosGzUrbanic]

Hi! is there any solution to my problem? When I set the position as Absolute, it doesn't stack the cards as in the video, it puts one card above the other instead. so when test the page, theres a lot of space in the page over the section
Thanks

[xReTuneSx]

Hey, I love your content, theres so much useful stuff for Elementor. Thank you <3

[taimoursoomro]

Thanks it worked liked a charm i was making a very small mistake but figured it out and it worked thanks.

[harshkhaitan]

I have some issue with this tutorial on my website. The cards are not moving up serially. I mean the card which is at the bottom scroll ups first and the card at the top scroll up at last

[yvescrystal]

Hello, Really cool effect. I followed your steps it and it works fine. The only problem I am having is that when I am scrolling down, all the cards are invisible. Then, as soon as the effect takes place, the cards appear. Do you have an idea why and how I could correct this?

[tay_functional]

I Love your content and your templates <3 great job man!

[noelfromgen]

Great animations. Your tutorials are always great. Sadly it doesn't work for me, especially on widescreens. The animation is starting to early and the main container is growing during the scroll Animation

[mtvsan]

It didn't worked for me. I am using Hub Theme and have placed CSS in Custom CSS option provided by the theme.

[afolabiraymond]

Your videoes are amazing and you are my mentor in elementor...Thank you for always making a useful video content