Seitenübergänge

Subscribe to my newsletter and never miss my upcoming articles

Ich habe für das my.awesomeBible Dashboard einen Seitenübergang gebaut.

Das ganze Skript ist 63 Zeilen lang, benutzt jQuery - Shame on me - und GSAP.

Ich habe mich nicht davon abhalten lassen, so Features wie radomized Farben einzubauen.

const colors = ["#4bedc2","#1a1423","#372549","#774c60","#b75d69","#eacdc2","#aa076b","#61045f"];
const RandomColor = colors[Math.floor(Math.random() * colors.length)];
const loadingScreen = document.getElementById("ls");
loadingScreen.style.backgroundColor = RandomColor;

Hier das ganze Skript:

function delay(n) {
    n = n || 2000;
    return new Promise((done) => {
        setTimeout(() => {
            done();
        }, n);
    });
}

function pageTransition() {
    var tl = gsap.timeline();
    tl.to(".loading-screen", {
        duration: 1.2,
        width: "100%",
        left: "0%",
        ease: "Expo.easeInOut",
    });

    tl.to(".loading-screen", {
        duration: 1,
        width: "100%",
        left: "100%",
        ease: "Expo.easeInOut",
        delay: 0.3,
    });
    tl.set(".loading-screen", { left: "-100%" });
}

function contentAnimation() {
    var tl = gsap.timeline();
    tl.from(".animate-this", { duration: 1, y: 30, opacity: 0, stagger: 0.4, delay: 0.2 });
}

$(function () {
    barba.init({
        sync: true,

        transitions: [
            {
                async leave(data) {
                    const done = this.async();

                    pageTransition();
                    await delay(1000);
                    done();
                },

                async enter(data) {
                    contentAnimation();
                },

                async once(data) {
                    contentAnimation();
                },
            },
        ],
    });
});
// Make Gradient Color Random
const colors = ["#4bedc2","#1a1423","#372549","#774c60","#b75d69","#eacdc2","#aa076b","#61045f"];
const RandomColor = colors[Math.floor(Math.random() * colors.length)];
const loadingScreen = document.getElementById("ls");
loadingScreen.style.backgroundColor = RandomColor;

No Comments Yet