JSFiddle - React, Tailwind, and code Playground

by kidastudio

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lottie Animation Grid</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.6/lottie.min.js"></script>
</head>
<body>
    <div class="grid-container" id="gridContainer"></div>
    <div class="pagination">
        <button id="prevBtn" onclick="prevPage()">Previous</button>
        <button id="nextBtn" onclick="nextPage()">Next</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
}

.pagination {
    text-align: center;
    margin-top: 20px;
}

button {
    padding: 10px 20px;
    margin: 0 10px;
}

JavaScript

var animations = [
    'animation1.json',
    'animation2.json',
    'animation3.json',
    // Add more animation JSON paths here
];

var currentPage = 0;
var itemsPerPage = 9; // 3x3 grid

function loadAnimations(page) {
    var gridContainer = document.getElementById('gridContainer');
    gridContainer.innerHTML = '';

    var startIndex = page * itemsPerPage;
    var endIndex = startIndex + itemsPerPage;

    for (var i = startIndex; i < endIndex && i < animations.length; i++) {
        var animationContainer = document.createElement('div');
        animationContainer.classList.add('animation');
        gridContainer.appendChild(animationContainer);

        var animationData = {
            container: animationContainer,
            renderer: 'svg',
            loop: true,
            autoplay: true,
            path: animations[i]
        };

        var anim = lottie.loadAnimation(animationData);
    }
}

function prevPage() {
    if (currentPage > 0) {
        currentPage--;
        loadAnimations(currentPage);
    }
}

function nextPage() {
    var totalPages = Math.ceil(animations.length / itemsPerPage);
    if (currentPage < totalPages - 1) {
        currentPage++;
        loadAnimations(currentPage);
    }
}

loadAnimations(currentPage);