Jumping stacked cards animation

Question

I have stack of cards where on click, the cards will change to the next card behind and so on. Please how do I make the cards to automatically change to the next card behind without clicking on the card to change.

And I also want the change animation. I want to make the change animation such that the front card will appear to swipe down to the back, showing the next card. The animation should continue with all the cards indefinitely.

But currently what I have is I have to click on the card for it to swipe and show next cards. I want to make an auto-swipe

<style type="text/css">
         .flipcard { position: absolute; height: 100%; width: 100%; z-index: 100; transform-style: preserve-3d; }
    .innercard { position: absolute; height: 250px; width: 100%; border-radius: 15px; backdrop-filter: blur(25px); background: rgba(255, 255, 255, 0.1); box-shadow: 0 10px 40px rgba(255, 255, 255, 0.20); border: 1px solid rgba(255, 255, 255, 0.1); backface-visibility: hidden; text-align: center; font-size: 2rem; transform: translate(-50%, -50%); justify-content: center; align-content: center; }
    .innercard:nth-last-child(n + 3) { --y: calc(-5% - 25px); transform: translate(-5%, var(--y)) scale(0.95); box-shadow: 0 0 1px 1px #00000003; }
    .innercard:nth-last-child(2) { --y: calc(-5% - 10px); transform: translate(-5%, var(--y)) scale(1); }
    .innercard:nth-last-child(1) { --y: calc(-5% + 10px); transform: translate(-5%, var(--y)) scale(1.05); }

    @keyframes swap {
        50% { transform: translate(-50%, calc(var(--y) -250px)) scale(0.85) rotate(-5deg); animation-timing-function: ease-in; }
        100% { transform: translate(-50%, calc(var(--y) -15px)) scale(0.85); z-index: -1; }
    }
 </style>


<div class="subbottom" style="background-color: #011b33;">
                <br />
                <div class="col-sm-11" style="width: 100%; margin: 0 auto; padding: 5px; margin-top: 3%;">
                    <div class="row" style="margin: 0 auto; width: 100%; margin-top: 2%; margin-bottom: 0%;">
                        <div class="col-sm-9" style="margin: 0 auto; padding: 6px; color: #ffffff;">
                            <div style="margin: 0 auto; margin-top: 3%; font-family: 'Mulish', sans-serif; font-weight: 900; font-size: 7.1vmin; line-height: normal; vertical-align: baseline; letter-spacing: 0px; word-spacing: 0px; text-align: start;">
                                <span style="margin: 0 auto;">This is the second Div header</span>
                            </div>
                        </div>
                        <div class="col-sm-3" style="margin: 0 auto; padding: 6px;"></div>
                    </div>
                    <div class="row" style="width: 100%; margin: 0 auto;">
                        <div class="col-sm-5" style="margin: 0 auto; padding: 5px; margin-bottom: 0%;">
                            <div style="line-height: normal; vertical-align: baseline; letter-spacing: 0px; word-spacing: 0px; text-align: start;">
                                <h5 style="color: #1bb6f4;">Div Sub Header</h5>
                                <label style="color: #ffffff; font-size: 15.90px;">This section will contain detailed contents</label>
                            </div>
                        </div>
                        <div class="col-sm-1" style="margin: 0 auto;"></div>
                        <div class="col-sm-6" style="width: 100%; margin: 0 auto; padding: 5px; margin-bottom: 0%; text-align: center; position: relative;">
                            <div class="sect">
                                <div class="flipcard">
                                    <div class="innercard font-face">FRONT CARD 1</div>
                                    <div class="innercard font-face">FRONT CARD 2</div>
                                    <div class="innercard font-face">FRONT CARD 3</div>
                                </div>
                            </div>
                        </div>
                        <br />
                    </div>
                    <br />
                </div>
                <br />
            </div>

<script>
        let flipcard = document.querySelector(".flipcard");

        [...flipcard.children].reverse().forEach(i => flipcard.append(i));

        flipcard.addEventListener("click", swap);

        function swap(e) {
            let innercard = document.querySelector(".innercard:last-child");
            if (e.target !== innercard) return;
            innercard.style.animation = "swap 0ms forwards";

            setTimeout(() => {
                innercard.style.animation = "";
                flipcard.prepend(innercard);
            }, 300);
        }
    </script>

Answer 1

Hi @Donald Symmons,

But currently what I have is I have to click on the card for it to swipe and show next cards. I want to make an auto-swipe

If this is the case, you can use setInterval() to achieve your needs.

function swap() {
            let innercard = document.querySelector(".innercard:last-child");
            //if (e.target !== innercard) return;
            innercard.style.animation = "swap 0ms forwards";
            setTimeout(() => {
                innercard.style.animation = "";
                flipcard.prepend(innercard);
            }, 300);

        }

        setInterval(swap, 2000);

Best regards,

Xudong Peng

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.