Chaturbate

Apps Home | Create an App
tip300 rando animation
Author: smalltownboi4u
Description Source Code Launch App Current Users
cb.onTip(function (tip) {
    const userName = tip['from_user']; // Get the tipper's name
    const tipAmount = tip['amount']; // Get the tip amount

    // Only trigger animations for tips of 300 or more tokens
    if (tipAmount >= 300) {
        const animations = [
            cannonBoomAnimation,
            dancingBananaAnimation,
            champagnePopAnimation,
            kissingLipsAnimation,
            mischievousCatAnimation,
            sassyDevilAnimation
        ];

        const randomAnimation = animations[Math.floor(Math.random() * animations.length)];
        randomAnimation(userName, tipAmount);
    }
});

// Animation 1: Cartoon Cannon Shooter
function cannonBoomAnimation(userName, tipAmount) {
    const container = document.createElement("div");
    container.id = "cannon-container";
    container.innerHTML = `
        <div id="cannon">
            🎉 BOOM! 
            <span id="cannon-banner">${userName} tipped ${tipAmount} tokens!</span>
        </div>
    `;
    document.body.appendChild(container);
    setTimeout(() => container.remove(), 5000);
}

// Animation 2: Dancing Banana
function dancingBananaAnimation(userName, tipAmount) {
    const container = document.createElement("div");
    container.id = "banana-container";
    container.innerHTML = `
        <div id="banana">🍌</div>
        <div id="bubble">"Thanks, ${userName}!"</div>
    `;
    document.body.appendChild(container);
    setTimeout(() => container.remove(), 5000);
}

// Animation 3: Champagne Pop
function champagnePopAnimation(userName, tipAmount) {
    const container = document.createElement("div");
    container.id = "champagne-container";
    container.innerHTML = `
        <div id="champagne">🍾</div>
        <div id="bubbles">${userName} popped ${tipAmount} tokens!</div>
    `;
    document.body.appendChild(container);
    setTimeout(() => container.remove(), 5000);
}

// Animation 4: Kissing Lips
function kissingLipsAnimation(userName, tipAmount) {
    const container = document.createElement("div");
    container.id = "lips-container";
    container.innerHTML = `
        <div id="lips">💋</div>
        <div id="lip-banner">Thanks, ${userName}!</div>
    `;
    document.body.appendChild(container);
    setTimeout(() => container.remove(), 5000);
}

// Animation 5: Mischievous Cat
function mischievousCatAnimation(userName, tipAmount) {
    const container = document.createElement("div");
    container.id = "cat-container";
    container.innerHTML = `
        <div id="cat">🐱</div>
        <div id="cat-banner">${userName} is purr-fect with ${tipAmount} tokens!</div>
    `;
    document.body.appendChild(container);
    setTimeout(() => container.remove(), 5000);
}

// Animation 6: Sassy Devil
function sassyDevilAnimation(userName, tipAmount) {
    const container = document.createElement("div");
    container.id = "devil-container";
    container.innerHTML = `
        <div id="devil">😈</div>
        <div id="devil-banner">${userName} is devilishly generous with ${tipAmount} tokens!</div>
    `;
    document.body.appendChild(container);
    setTimeout(() => container.remove(), 5000);
}

// Add CSS for Cartoon Animations
cb.drawPanel(function () {
    return {
        css: `
            /* Common Banner Style */
            div[id$="-banner"] {
                background-color: #FFD700;
                color: black;
                font-weight: bold;
                padding: 5px 10px;
                border-radius: 10px;
                text-align: center;
                margin-top: 10px;
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
            }

            /* Cannon Animation */
            #cannon-container {
                position: fixed;
                bottom: 20%;
                left: 10%;
                animation: shoot 3s ease-out;
                font-size: 24px;
            }

            /* Banana Animation */
            #banana-container {
                position: fixed;
                bottom: 20%;
                left: 50%;
                transform: translateX(-50%);
                animation: dance 3s infinite;
                font-size: 40px;
            }

            /* Champagne Animation */
            #champagne-container {
                position: fixed;
                bottom: 10%;
                left: 30%;
                animation: pop 2s ease-out;
                font-size: 36px;
            }

            /* Lips Animation */
            #lips-container {
                position: fixed;
                top: 30%;
                right: 20%;
                animation: kiss 2s infinite;
                font-size: 36px;
            }

            /* Cat Animation */
            #cat-container {
                position: fixed;
                bottom: 15%;
                right: 10%;
                animation: slideIn 3s ease-in;
                font-size: 40px;
            }

            /* Devil Animation */
            #devil-container {
                position: fixed;
                top: 20%;
                left: 15%;
                animation: bounce 2s infinite;
                font-size: 36px;
            }

            /* Animations */
            @keyframes shoot {
                from { transform: translateX(-200%); }
                to { transform: translateX(0); }
            }
            @keyframes dance {
                0%, 100% { transform: rotate(-10deg); }
                50% { transform: rotate(10deg); }
            }
            @keyframes pop {
                from { transform: scale(0); }
                to { transform: scale(1); }
            }
            @keyframes kiss {
                0%, 100% { transform: scale(1); }
                50% { transform: scale(1.2); }
            }
            @keyframes slideIn {
                from { transform: translateX(200%); }
                to { transform: translateX(0); }
            }
            @keyframes bounce {
                0%, 100% { transform: translateY(0); }
                50% { transform: translateY(-10px); }
            }
        `
    };
});