🐚 WEB SHELL ACTIVATED

📁 File Browser

Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads

📄 Viewing: ./../../../../584701.klas4s23.mid-ica.nl/public_html/../public_html/assets/js/gsap.js

document.addEventListener('DOMContentLoaded', function() {
    function getScrollRevealConfig() {
        if (window.innerWidth < 768) { // Mobile devices
            return {
                duration: 1200,
                origin: 'bottom',
                distance: '80px',
                reset: false,
                viewFactor: 0.05,
                easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)', // More dynamic easing
                opacity: 0,
                delay: 150,
                scale: 0.95 // Subtle scale effect
            };
        } else { // Desktop and larger devices
            return {
                duration: 1200,
                origin: 'bottom',
                distance: '100px',
                reset: false,
                viewFactor: 0.25,
                easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
                opacity: 0,
                delay: 200,
                scale: 0.95
            };
        }
    }
    
    ScrollReveal().reveal('section', getScrollRevealConfig());
    
    
    

    // Reveal images with enhanced animation
    ScrollReveal().reveal('.home img, .about img', { 
        duration: 2500, 
        origin: 'right',
        distance: '300px',
        delay: 400,
        reset: false,
        viewFactor: 0.2,
        easing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)', // Bouncy easing
        scale: 0.8,
        rotate: { z: 5 } // Subtle rotation
    });

    ScrollReveal().reveal('.home__shadow, .about__shadow', { 
        duration: 2200, 
        origin: 'right',
        distance: '250px',
        delay: 700,
        reset: false,
        viewFactor: 0.2,
        easing: 'cubic-bezier(0.19, 1, 0.22, 1)', // Smooth elastic
        opacity: 0.3
    });

    ScrollReveal().reveal('.about__box', { 
        duration: 2000, 
        origin: 'right',
        distance: '200px',
        delay: 1000,
        reset: false,
        viewFactor: 0.2,
        easing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
        scale: 0.9,
        rotate: { y: 15 }
    });

    function revealSocialElements() {
        const socialElements = document.querySelectorAll('.home__social a');
        const initialDelay = 800;
    
        if (window.innerWidth < 768) { // Mobile devices
            socialElements.forEach((element, index) => {
                ScrollReveal().reveal(element, { 
                    duration: 1800, 
                    origin: 'left',
                    distance: '150px',
                    reset: false,
                    viewFactor: 0.2,
                    delay: initialDelay + (index * 150),
                    easing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
                    scale: 0.7,
                    rotate: { z: -10 + (index * 5) }
                });
            });
        } else { // Desktop and larger devices
            socialElements.forEach((element, index) => {
                ScrollReveal().reveal(element, { 
                    duration: 1800, 
                    origin: 'right',
                    distance: '150px',
                    reset: false,
                    viewFactor: 0.2,
                    delay: initialDelay + (index * 150),
                    easing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
                    scale: 0.7,
                    rotate: { z: 10 - (index * 5) }
                });
            });
        }
    
        // Enhanced geometric-box animation
        ScrollReveal().reveal('.geometric-box', { 
            duration: 2200, 
            origin: window.innerWidth < 768 ? 'left' : 'right',
            distance: '200px',
            reset: false,
            viewFactor: 0.2,
            delay: initialDelay + (socialElements.length * 150),
            easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
            scale: 0.6,
            rotate: { x: 15, y: 15, z: 15 }
        });
    }
    
    // Call the function to reveal elements
    revealSocialElements();
    
    // Reapply ScrollReveal on window resize to adjust based on device width
    window.addEventListener('resize', revealSocialElements);
    

    // Enhanced home content animations
    ScrollReveal().reveal('.home__name', { 
        duration: 2200, 
        origin: 'left',
        distance: '250px',
        reset: false,
        viewFactor: 0.2,
        easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
        scale: 0.8,
        delay: 200
    });

    ScrollReveal().reveal('.home__description', { 
        duration: 2000, 
        origin: 'left',
        distance: '200px',
        reset: false,
        viewFactor: 0.2,
        easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
        opacity: 0,
        delay: 500
    });

    // Enhanced button animations with hover-like effect
    ScrollReveal().reveal('button', { 
        duration: 1800, 
        origin: 'bottom',
        distance: '80px',
        reset: false,
        scale: 0.8,
        viewFactor: 0.1,
        easing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
        delay: 300
    });

    // Enhanced about section animations
// Check if the device is desktop
const isDesktop = window.innerWidth >= 1024;

// Enhanced .about__description animation
ScrollReveal().reveal('.about__description', { 
    duration: 2200, 
    origin: isDesktop ? 'right' : 'left',
    distance: '250px',
    reset: false,
    viewFactor: 0.2,
    delay: 300,
    easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
    scale: 0.95,
    rotate: { z: isDesktop ? 2 : -2 }
});

// Enhanced .about__item animation with staggered effect
const aboutItems = document.querySelectorAll('.about__item');
aboutItems.forEach((item, index) => {
    ScrollReveal().reveal(item, { 
        duration: 1800, 
        origin: isDesktop ? 'right' : 'left',
        distance: '200px',
        reset: false,
        viewFactor: 0.2,
        delay: 600 + (index * 200), // Staggered delay for each item
        easing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
        scale: 0.9,
        rotate: { x: 5 }
    });
});


    // Enhanced about buttons animation
    ScrollReveal().reveal('.about__buttons', { 
        duration: 2000, 
        origin: 'bottom',
        distance: '150px',
        delay: 1000,
        reset: false,
        viewFactor: 0.2,
        easing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
        scale: 0.8,
        rotate: { y: 10 }
    });

    // Enhanced services cards with wave effect
    const serviceCards = document.querySelectorAll('.services__card');
    serviceCards.forEach((card, index) => {
        ScrollReveal().reveal(card, { 
            duration: 2000, 
            origin: index % 2 === 0 ? 'left' : 'right', // Alternating directions
            distance: '250px',
            reset: false,
            viewFactor: 0.2,
            delay: 200 + (index * 300), // Staggered delay
            easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
            scale: 0.85,
            rotate: { z: index % 2 === 0 ? -5 : 5 }
        });
    });    

// Enhanced animation parameters
const animationDuration = 1800;
const animationDistance = '120px';
const initialDelay = 150;

// Enhanced reveal function with more dynamic effects
const revealElements = (elements, origin, delayFactor, viewFactor, extraOptions = {}) => {
    elements.forEach((element, index) => {
        ScrollReveal().reveal(element, { 
            duration: animationDuration, 
            origin: origin,
            distance: animationDistance,
            reset: false,
            viewFactor: viewFactor,
            delay: initialDelay + index * delayFactor,
            easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
            scale: 0.9,
            ...extraOptions
        });
    });
};

// Enhanced reveal elements for desktop and mobile
if (window.innerWidth >= 768) { // Desktop and larger devices
    // Desktop animations with more sophisticated effects
    revealElements(
        ['.contact__form', '.contact__mail', '.contact__title', '.contact__data', '.section__title-2', '.contact__description-1', '.contact__description-2', '.contact__social-description-1', '.contact__social-description-2', '.contact__button', '.geometric-box'],
        'right',
        200,
        0.2,
        { 
            easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
            rotate: { y: 5 }
        }
    );

    // Enhanced social links with bounce effect
    const contactSocialLinks = document.querySelectorAll('.contact__social-link');
    revealElements(contactSocialLinks, 'left', 150, 0.2, {
        easing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
        scale: 0.7,
        rotate: { z: 10 }
    });

    // Enhanced input fields with wave animation
    const contactInputs = document.querySelectorAll('.contact__input, .contact__area');
    contactInputs.forEach((input, index) => {
        ScrollReveal().reveal(input, { 
            duration: 1600, 
            origin: 'right',
            distance: '150px',
            reset: false,
            viewFactor: 0.2,
            delay: initialDelay + index * 120,
            easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
            scale: 0.95,
            rotate: { x: 5 }
        });
    });
} else { // Mobile devices
    // Enhanced mobile animations
    revealElements(
        ['.contact__form', '.contact__mail', '.contact__title', '.contact__data', '.section__title-2', '.contact__button', '.geometric-box'],
        'bottom',
        200,
        0.05,
        {
            easing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
            scale: 0.85
        }
    );

    // Enhanced mobile social links
    const contactSocialLinks = document.querySelectorAll('.contact__social-link');
    revealElements(contactSocialLinks, 'left', 200, 0.5, {
        easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
        scale: 0.8,
        rotate: { z: -5 }
    });

    // Enhanced mobile input fields
    const contactInputs = document.querySelectorAll('.contact__input, .contact__area');
    revealElements(contactInputs, 'bottom', 150, 0.5, {
        easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
        scale: 0.9
    });
}

// Simple footer animations
ScrollReveal().reveal('.footer__header', { 
    duration: 1600, 
    origin: 'bottom',
    distance: '60px',
    reset: false,
    viewFactor: 0.2,
    delay: 200,
    easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
    opacity: 0
});

ScrollReveal().reveal('.footer__group', { 
    duration: 1400, 
    origin: 'bottom',
    distance: '40px',
    reset: false,
    viewFactor: 0.2,
    delay: 400,
    easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
    opacity: 0,
    interval: 200 // Automatic staggering
});

ScrollReveal().reveal('.footer__bottom', { 
    duration: 1200, 
    origin: 'bottom',
    distance: '30px',
    reset: false,
    viewFactor: 0.2,
    delay: 800,
    easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
    opacity: 0
});



});

document.addEventListener('DOMContentLoaded', function() {
    // Enhanced section title animation with dramatic effect
    ScrollReveal().reveal('.section__title-1', { 
        duration: 2500, 
        origin: 'top',
        distance: '100px',
        reset: false,
        viewFactor: 0.2,
        scale: 0.7,
        opacity: 0,
        easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
        delay: 200,
        rotate: { z: 5 }
    });

    // Enhanced scroll buttons with dynamic entrance
    const scrollButtons = document.querySelectorAll('.projects__scroll-buttons button');
    scrollButtons.forEach((button, index) => {
        ScrollReveal().reveal(button, { 
            duration: 1800, 
            origin: index === 0 ? 'left' : 'right', // Different origins for left/right buttons
            distance: '80px',
            reset: false,
            viewFactor: 0.2,
            opacity: 0,
            delay: 600 + (index * 200),
            easing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
            scale: 0.8,
            rotate: { z: index === 0 ? -10 : 10 }
        });
    });
});

🎯 Available Actions