Animation Showcase

Text Animations

Typewriter Effects

/* CSS */
.typewriter {
    font-family: 'Courier New', monospace;
    font-size: 24px;
    border-right: 2px solid #ffffff;
    white-space: pre-wrap; 
    overflow: hidden;
    max-width: 100%;
    min-height: 1.2em;
    animation: blink 0.75s step-end infinite;
}

@keyframes blink {
    from, to { border-color: transparent }
    50% { border-color: #ffffff }
}

/* JavaScript */
function typeWriter(element, text, speed) {
    element.textContent = ''; // Clear existing content
    let i = 0;
    const maxWidth = element.offsetWidth;
    let currentLine = '';

    function type() {
        if (i < text.length) {
            const char = text.charAt(i);
            const testLine = currentLine + char;
            
            // Add line break if word would exceed container width
            if (getTextWidth(testLine, element) > maxWidth) {
                element.textContent += '\n';
                currentLine = char;
            } else {
                currentLine = testLine;
            }
            
            element.textContent += char;
            i++;
            setTimeout(type, speed);
        }
    }

    // Helper function to calculate text width
    function getTextWidth(text, element) {
        const canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement('canvas'));
        const context = canvas.getContext('2d');
        const font = window.getComputedStyle(element, null).getPropertyValue('font');
        context.font = font;
        return context.measureText(text).width;
    }

    type();
}

// Replay functionality
function replayTypewriter(elementId, text, speed) {
    const element = document.getElementById(elementId);
    element.textContent = '';
    typeWriter(element, text, speed);
}

Sliding Effects

Sliding Right Animation

/* CSS */
.sliding-right {
    display: block;
    position: relative;
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.8s ease-out;
    width: 100%;
    will-change: transform, opacity;
}

.sliding-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* JavaScript */
function replaySliding(elementId) {
    const element = document.getElementById(elementId);
    // Reset the element to its initial state
    element.style.opacity = '0';
    element.style.transform = 'translateX(100px)';
    
    // Force reflow
    void element.offsetWidth;
    
    // Restore the transition
    element.style.transition = 'all 0.8s ease-out';
    
    // Apply the active state
    requestAnimationFrame(() => {
        element.style.opacity = '1';
        element.style.transform = 'translateX(0)';
    });
}

Sliding Left Animation

/* CSS */
.sliding-left {
    display: block;
    position: relative;
    opacity: 0;
    transform: translateX(-100px);
    width: 100%;
    will-change: transform, opacity;
}

.sliding-left.with-transition {
    transition: all 0.8s ease-out;
}

.sliding-left.active {
    opacity: 1;
    transform: translateX(0);
}

/* JavaScript */
function initializeSlidingLeft(elementId, text) {
    const element = document.getElementById(elementId);
    element.textContent = text;
    element.classList.add('sliding-left');
    
    // Trigger the animation after a small delay
    setTimeout(() => {
        element.classList.add('active');
    }, 100);
}

Flying Effects

Basic Flying

Flying Right Animation

/* CSS */
.flying-right {
    display: flex;
    justify-content: center;
    position: relative;
    opacity: 0;
    transform: translate(100px, -50px) rotate(15deg);
    width: 100%;
    will-change: transform, opacity;
}

.flying-right.with-transition {
    transition: all 0.8s ease-out;
}

.flying-right.active {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
}

Flying Word Left Animation

/* CSS */
.flying-left {
    display: flex;
    justify-content: center;
    position: relative;
    opacity: 0;
    transform: translate(-100px, -50px) rotate(-15deg);
    width: 100%;
    will-change: transform, opacity;
}

.flying-left.with-transition {
    transition: all 0.8s ease-out;
}

.flying-left.active {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
}

Flying Top Animation

/* CSS */
.flying-top {
    display: flex;
    justify-content: center;
    position: relative;
    opacity: 0;
    transform: translateY(-100px);
    width: 100%;
    will-change: transform, opacity;
}

.flying-top.with-transition {
    transition: all 0.8s ease-out;
}

.flying-top.active {
    opacity: 1;
    transform: translateY(0);
}

/* JavaScript */
function initializeFlyingTop(elementId, text) {
    const element = document.getElementById(elementId);
    element.textContent = text;
    element.classList.add('flying-top');
    
    // Trigger the animation after a small delay
    setTimeout(() => {
        element.classList.add('active');
    }, 100);
}

Flying Bottom Animation

/* CSS */
.flying-bottom {
    display: flex;
    justify-content: center;
    position: relative;
    opacity: 0;
    transform: translateY(100px);
    width: 100%;
    will-change: transform, opacity;
}

.flying-bottom.with-transition {
    transition: all 0.8s ease-out;
}

.flying-bottom.active {
    opacity: 1;
    transform: translateY(0);
}

/* JavaScript */
function initializeFlyingBottom(elementId, text) {
    const element = document.getElementById(elementId);
    element.textContent = text;
    element.classList.add('flying-bottom');
    
    // Trigger the animation after a small delay
    setTimeout(() => {
        element.classList.add('active');
    }, 100);
}

Flying Words

Flying Words Right Animation

Flying Words Left Animation

Flying Words Top Animation

/* CSS */
.flyword-top {
    display: inline-block;
    position: relative;
    opacity: 0;
    transform: translateY(-50px);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform, opacity;
}

.flyword-top.active {
    opacity: 1;
    transform: translateY(0);
}

/* JavaScript */
function initializeFlywordTop(elementId, text) {
    const element = document.getElementById(elementId);
    element.innerHTML = '';
    
    const words = text.split(' ');
    
    words.forEach((word, index) => {
        const span = document.createElement('span');
        span.textContent = word + (index < words.length - 1 ? ' ' : '');
        span.className = 'flyword-top';
        span.style.transitionDelay = `${index * 0.1s}`;
        element.appendChild(span);
    });
    
    requestAnimationFrame(() => {
        Array.from(element.children).forEach(span => {
            span.classList.add('active');
        });
    });
}

Flying Words Bottom Animation

/* CSS */
.flyword-bottom {
    display: inline-block;
    position: relative;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform, opacity;
}

.flyword-bottom.active {
    opacity: 1;
    transform: translateY(0);
}

/* JavaScript */
function initializeFlywordBottom(elementId, text) {
    const element = document.getElementById(elementId);
    element.innerHTML = '';
    
    const words = text.split(' ');
    
    words.forEach((word, index) => {
        const span = document.createElement('span');
        span.textContent = word + (index < words.length - 1 ? ' ' : '');
        span.className = 'flyword-bottom';
        span.style.transitionDelay = `${index * 0.1s}`;
        element.appendChild(span);
    });
    
    requestAnimationFrame(() => {
        Array.from(element.children).forEach(span => {
            span.classList.add('active');
        });
    });
}

Flying Letters

Flying Letters Right

/* CSS */
.flyletter-right {
    display: inline-block;
    position: relative;
    opacity: 0;
    transform: translate(30px, -30px) rotate(45deg);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform, opacity;
}

.flyletter-right.active {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
}

/* JavaScript */
function initializeFlyletterRight(elementId, text) {
    const element = document.getElementById(elementId);
    element.innerHTML = '';
    
    [...text].forEach((char, index) => {
        const span = document.createElement('span');
        span.textContent = char === ' ' ? '\u00A0' : char;
        span.className = 'flyletter-right';
        span.style.transitionDelay = `${index * 0.05s}`;
        element.appendChild(span);
    });
    
    requestAnimationFrame(() => {
        Array.from(element.children).forEach(span => {
            span.classList.add('active');
        });
    });
}

Flying Letters Left

/* CSS */
.flyletter-left {
    display: inline-block;
    position: relative;
    opacity: 0;
    transform: translate(-30px, -30px) rotate(-45deg);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform, opacity;
}

.flyletter-left.active {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
}

/* JavaScript */
function initializeFlyletterLeft(elementId, text) {
    const element = document.getElementById(elementId);
    element.innerHTML = '';
    
    [...text].forEach((char, index) => {
        const span = document.createElement('span');
        span.textContent = char === ' ' ? '\u00A0' : char;
        span.className = 'flyletter-left';
        span.style.transitionDelay = `${index * 0.05s}`;
        element.appendChild(span);
    });
    
    requestAnimationFrame(() => {
        Array.from(element.children).forEach(span => {
            span.classList.add('active');
        });
    });
}

Flying Letters Top

/* CSS */
.flyletter-top {
    display: inline-block;
    position: relative;
    opacity: 0;
    transform: translateY(-30px) rotate(-45deg);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform, opacity;
}

.flyletter-top.active {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

/* JavaScript */
function initializeFlyletterTop(elementId, text) {
    const element = document.getElementById(elementId);
    element.innerHTML = '';
    
    [...text].forEach((char, index) => {
        const span = document.createElement('span');
        span.textContent = char === ' ' ? '\u00A0' : char;
        span.className = 'flyletter-top';
        span.style.transitionDelay = `${index * 0.05s}`;
        element.appendChild(span);
    });
    
    requestAnimationFrame(() => {
        Array.from(element.children).forEach(span => {
            span.classList.add('active');
        });
    });
}

Flying Letters Bottom

/* CSS */
.flyletter-bottom {
    display: inline-block;
    position: relative;
    opacity: 0;
    transform: translateY(30px) rotate(45deg);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform, opacity;
}

.flyletter-bottom.active {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

/* JavaScript */
function initializeFlyletterBottom(elementId, text) {
    const element = document.getElementById(elementId);
    element.innerHTML = '';
    
    [...text].forEach((char, index) => {
        const span = document.createElement('span');
        span.textContent = char === ' ' ? '\u00A0' : char;
        span.className = 'flyletter-bottom';
        span.style.transitionDelay = `${index * 0.05s}`;
        element.appendChild(span);
    });
    
    requestAnimationFrame(() => {
        Array.from(element.children).forEach(span => {
            span.classList.add('active');
        });
    });
}

Scramble Effects

Scramble Left

/* CSS */
.scramble-left {
    display: inline-block;
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.4s ease-out;
}

.scramble-left.active {
    opacity: 1;
    transform: translateX(0);
}

/* JavaScript */
function initializeScrambleLeft(elementId, text) {
    const element = document.getElementById(elementId);
    const finalText = text;
    let currentText = '';
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()';
    
    element.innerHTML = '';
    element.classList.add('scramble-left');
    
    let counter = 0;
    const scrambleInterval = setInterval(() => {
        currentText = finalText.substring(0, counter) +
            Array(finalText.length - counter).fill(0)
                .map(() => chars[Math.floor(Math.random() * chars.length)])
                .join('');
        
        element.textContent = currentText;
        counter++;
        
        if (counter > finalText.length) {
            clearInterval(scrambleInterval);
            element.textContent = finalText;
            element.classList.add('active');
        }
    }, 50);
}

Scramble Right

/* CSS */
.scramble-right {
    display: inline-block;
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.4s ease-out;
}

.scramble-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* JavaScript */
function initializeScrambleRight(elementId, text) {
    const element = document.getElementById(elementId);
    const finalText = text;
    let currentText = '';
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()';
    
    element.innerHTML = '';
    element.classList.add('scramble-right');
    
    let counter = 0;
    const scrambleInterval = setInterval(() => {
        currentText = finalText.substring(0, counter) +
            Array(finalText.length - counter).fill(0)
                .map(() => chars[Math.floor(Math.random() * chars.length)])
                .join('');
        
        element.textContent = currentText;
        counter++;
        
        if (counter > finalText.length) {
            clearInterval(scrambleInterval);
            element.textContent = finalText;
            element.classList.add('active');
        }
    }, 50);
}