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

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. 💖

Hi, great video, anyone else encountering a horizontal scrolling problem on mobile following the code?

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

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!!!

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

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

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; }

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.

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

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

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?

I Love your content and your templates

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!!!

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

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

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

Love this! So glad I found you!!

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

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.

Works Great, thank you Bro!!!!❤️❤️❤️

Thanks my cards move but the overall container is not sticking up well

the javascript code you've given in the website, isn't working

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

i bought your template but on the desktop version the cards dont stick in the middle, they stick at the bottom

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

Wow! This is great, you deffinetly can make dream websites in elementor. Thanks! I have a question, is it possible to delay the time of the cards scrolling? It is to quick for people to read the first card on cellphone.

Your tutorial videos are amazing.

bro can you help me I followed every step and my parent container is not sticky and when I scroll only one card moves and there is white space below it I am using gsap and lenis for other animations

#MakeDreamWebsite Sir this is not working properly for me, when I scroll down the container cut off from frame, please help me to resolve the issue 😞?

Fantastic videos, as usual!

For me the problem was with the sticky situation. The container just doesn't hold up and the whole thing scrolls down. What I did was I first change the "--card-scroll-height" to 100 and then change the container height to 130vh. It should solve the problem. You can tweak around the values according to you as these values worked for me but its not necessary that it will work for you as well

Hey, can we enable page snap scroll with it? it doesn't seem to work with page snap scroll. if you know a method it would be much appreciated. Keep it up! Great work my friend

Really cool tutorial! It gives me a 403 error when I try to publish the cards with the Javascript code. What can I do to fix that?

this is such a great design and i really like it. i want to use it in my website but the section is not sticking to the top. is there anyway u can help me fix it ? i really need it to work

I just sent you an email with a link to my website page that I am having issues with while trying to use this animation. When I first set the page up and followed your instructions both sections were sticky and worked properly, but suddenly stopped being sticky and now both containers with text and cards scroll up and down the screen without showing all the cards.

I managed to fix the sticky issue. To do so, it's necessary to remove the 'mdw-stacked-card-area' CSS class along with the CSS code from the second container and apply them to the first, main container. I also want to thank the creator of the video !

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

Hi,buddy can you make a video on how to add rotating border effect on button using elementor.

Hey, Thanks so much. It really worked . Woow...................

Well. It doesnt work. I did all steps insert the codes but the cards dont even show up rotated. There only one card above the other when i scroll nothing happens.

Hello there, I purchased this template. it's working fine on CANVAS mode but when I switch to full width, It doesn't work as expected. Please could you help regarding this?

Thank you for always making a useful video content!!! Please make some videos about Property related website...

bro, i bought one of your templates (horizental scroll) I upload it, and then insert it. it don't want to insert... do we need elementor pro or something ?

Unfortunately, the section keeps scrolling it doesn't stay sticky as in video, animation works but you wont be able to see all the cards. And many people below have the same issue, i have tried your new code as you said it updated and tried in new page, i have tried with default wordpress theme as well as elementor theme. it does not work and i have emailed author about the issue too, no answer. So dont waste your time people. I am not sure if the templates in templatish (author's shop) will work, i am afraid it has the same issue. (i dont know your email)

I just bought it but the page doesn't stay sticky, the cards move just right but the page scroll keeps going down !

Hi 🎉 iam very happy to see your contant is OMG😂 Can you create video on elementor topic. / When we relode the page a popup animation comes . Make a video on soon

Excellent video! =D

Great, how can I add those cards, I have the Premium Addons for Elementor plugin and I use the vertical scroll, but I can not enjoy the movement of the cards because it makes me scroll.

It doesnt stop on one place when cards are going up as on your video. Any suggestions?

How do I get the section to stick with the cards so it stays on one place while cards are moving away?

Great videos, as always 👌, what if I want the cards stacked to the right side and not in rotation, so if the page is been scrolled the cards will be animating from left right and right left according to page scroll

For those having a 403 error try to add this code in html. It worked for me document.addEventListener('DOMContentLoaded', function() { const stackedCardAreas = document.querySelectorAll('.mdw-stacked-card-area'); stackedCardAreas.forEach((cardArea) => { const cards = cardArea.querySelectorAll('.mdw-stacked-cards > .e-con, .mdw-stacked-cards > .e-container, .mdw-stacked-cards > .e-con-inner > .e-con, .mdw-stacked-cards > .e-con-inner > .e-container'); const stickyContainer = cardArea.querySelector('.e-con, .e-container'); let previousScrollTop = window.pageYOffset || document.documentElement.scrollTop; let cardScrollHeight = parseInt(getComputedStyle(cardArea).getPropertyValue('--card-scroll-height')) || 400; let cardRotate = parseInt(getComputedStyle(cardArea).getPropertyValue('--card-rotate')) || 9; let stickyTop = 0; function setValues() { if (stickyContainer.offsetHeight > window.innerHeight) { stickyTop = cardArea.offsetTop - stickyContainer.offsetTop - window.innerHeight / 2; } stickyContainer.style.top = -stickyTop + 'px'; cards.forEach((card, index) => { card.style.transform = `rotate(-${index * cardRotate}deg)`; card.style.zIndex = cards.length - index; }); cardArea.style.height = stickyContainer.offsetHeight + ((cards.length - 1) * cardScrollHeight) + 'px'; } function cardSlideUp() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; const cardAreaTop = cardArea.offsetTop; const index = Math.floor((scrollTop - cardAreaTop - stickyTop) / cardScrollHeight); cards.forEach((card, i) => { card.classList.toggle('mdw-active-card', i = -1 && index < cards.length - 1) { card.style.transform = `rotate(${ -1 * i * cardRotate + (index + 1) * cardRotate }deg)`; } }); } setValues(); cardSlideUp(); window.addEventListener('scroll', cardSlideUp); window.addEventListener('resize', () => { setValues(); cardSlideUp(); }); }); });

The code is working but there is a problem, I am not able to stuck on this section and scroll the card. What's the problem could you please tell me?

Great Video But full container taking over height between others container, how can i reduce container height

Very good video, congratulations. I followed the step by step, but the effect didn't work. I don't know what could be wrong.

Hello sir i watch this video 4/5 time and do same process after added jv code they will work but not scroll in up they only can rotate can you explain please ❤

Really nice tutorial, I just tried it myself and saw, that the container wouldn't stay sticky, after trying to fix the issue I couldnt find any mistake. Than I decided to buy the template but even the template didn't work properly. My issue is, that the container doesn't stay sticky. Any reasons or solutions for that? Using Hello Elementor theme not havin a very lean setup with ACF and not much plugins. Thanks in Advance

You are so amazing! I have 1 website that I like to know how. They have this cool dragable and clickable hero section for their product. I hope you make a tutorial for same like this. ❤

thanks you so much for that!! Gracias!!

Thank you for your instructions. I bought your template, but unfortunately it doesn't work. The scrolling does not stop, but all the cards just wipe through quickly.

so talented!

I put the code same to same way you describe in the video.but it not working

Thank you! You rock ⚡⚡

This works perfect but after adding these codes other contents of my website are not visible.

Hello, i send you and email "Hello, stacked card works well and I loved the functionality but there is a problem with overflow on mobile devices "tablets and mobiles", can you fix it? I already added the code to the css but it doesn't work."

excellent content!! Can I make the cards move them automatically instead of moving while scrolling?

Could you answer what to modify in the code so that it works correctly, instead of saying that we should contact you? The animation starts before the container on the left can be seen properly.

Hi, this template doesn't work for me when scrolling on my phone. Any solution? Well thank you.

Hey! Can you help me? I have done evrything same and at the end i removed the left container coz I wanted this in full. Now this animation is happening but cards are getting scrolled more earlier. I mean i am not able to read the cards properly coz only half card is visible and they are getting scrolled. So can you suggest me what should i do so that whole card is visible then this animation takes place. Pls help bro!

What’s that Our Feature header font please, I love it! Great video.

Hi thank you for the tutorial. I want to ask you guys is it possible to create card stacks like this but using Instagram photos data?

I follow your channel in Brazil. I need to create an effect that I can't replicate. Do you freelance? Congratulations on the work and thank you for sharing your knowledge.

is it me or the template website in action is not working properly, You might have to fix that

I am having a problem with html, when I put html (JS code) in it will cause a 403 error

Great Video instead of a container can we do this with a column?

Amazing 🙌

Great content!

Hi there! Such a cool effect, thank you so much! Somehow it doesn't work for me though... I added your card scrolling effect to the 4th section of the website I'm working on, followed carefully all the steps. Once it's done, when I preview the website, I'm stuck on the hero section/1st section and can't scroll down to the next sections. Any idea what could be wrong?

Trying to do this from scratch. When I duplicate the card container (after applying absolute positioning), it gets duplicated right under the existing card, rather than on top of it. Any ideas what is going wrong there? Am I missing a step?

Great tutorial. How can you change left column text based on right card. So when you scroll, to change both columns

i bought the template, i copied the code as well, but not working ... when i put jq code in html tag... it gives server error 403. and couldn't update the template as well

Amazing!

Great video but why on mobile it is overflowing horizontaly, when i make overflow hidden, the whole page just breaks

Hello. I bought the card carousel template and I'm trying to put a button on every card. Can't find the way, can you help me, please?

This is amazing and it’s worked perfectly for me. However the code for the section is affecting other transition elements on my page. How can I stop this?

Awesome... ❤

Does anyone else get a 403 error when trying to save the html widget with the Javascript code? If so, any solution? Thank you

Very nice

Hi! I purchased the template but its not working very well on tablet. Can I contact you?

do you accept other Payment method? i'm brazilian and unfortunately I don't have an international card :( And I can't get the tutorial to work on my website

video is pixelated can't see anything, audio is fine in this and also play in private facing same issue of video

Can i do this without elementore pro?

i just bought the template and inserted it on my site but something is wrong the section doenst stop when i scroll :( so the first card is fyling up and then its over cause it just keeps scrolling :(

hey, i just purchased your template for this and like most others, im having issues with the sticky. I tried getting your email from your youtube page but its bugged after i prove im human. can you help me?

Why doesn't it work for me?

Hi Sir, a great job as usual!!! I have made it but it is not working for mobile. Where can be the mistake? Thanks

I have the problem, that the Cards are not finished and its scroll down. How can I fix it? Amazing Video!

My section just got lengthy as soon i inserted js code within html widget kindly help me with that what can be issue

Nice idea but like EVERYONE here says, the sticky function does not work! instead of asking everyone to email you, could please be so kind sir and just past the fixed code here or update the code on your website! Sorry if I sound arrogant but I don't know how else to point this issue out. Cheers!

I purchased the ready template and it still not working. No scrolling happening at all