JQuery ile örnek kod hazırladım. İnceleyebilirsiniz:

<button id="open-sign-popup">Login / Sign Up</button>
<div id="sign-popup" class="my-popup">
    <div class="my-popup-backdrop"></div>
    <div class="my-popup-window">
        <div class="my-popup-tabs">
            <div class="my-popup-tab active">Oturum Aç</div>
            <div class="my-popup-tab">Kayıt Ol</div>
        </div>
        <div id="sign-up" class="my-popup-tab-content">
            <h1>Oturum Aç</h1>
            <p>Buraya oturum açma formu gelecek.</p>
        </div>
        <div id="sign-in" class="my-popup-tab-content active">
            <h1>Kayıt Ol</h1>
            <p>Buraya kayıt olma formu gelecek.</p>
        </div>
    </div>
</div>

.my-popup {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    flex-direction:column;
    z-index:-1;
    pointer-events:none;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity ease .3s, z-index .3s linear 0s;
}
.my-popup.active {
    z-index:500;
    opacity:1;
    pointer-events:auto;
}
.my-popup > .my-popup-backdrop {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:1;
    background:#00000080;
}
.my-popup > .my-popup-window {
    position:relative;
    z-index:2;
    background:#fff;
    display:flex;
    flex-direction:column;
    border-radius:10px;
    box-shadow:0 5px 20px #00000040;
    width:500px;
    max-width:95%;
    transform:scale(0.95);
    transition:transform ease .3s;
}
.my-popup.active > .my-popup-window {
    transform:scale(1);
}
.my-popup > .my-popup-window > .my-popup-tabs {
    display:flex;
    flex-directon:row;
    width:100%;
}
.my-popup > .my-popup-window > .my-popup-tabs > .my-popup-tab {
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:25px 15px;
    cursor:pointer;
    color:#777;
    font-weight:bold;
}
.my-popup > .my-popup-window > .my-popup-tabs > .my-popup-tab.active {
    color:#000;
}
.my-popup .my-popup-window > .my-popup-tab-content {
    display:flex;
    visibility:hidden;
    height:0;
    opacity:0;
    pointer-events:none;
}
.my-popup .my-popup-window > .my-popup-tab-content.active {
    visibility:visible;
    flex-direction:column;
    height:auto;
    padding:15px;
    transition:opacity ease .3s;
    opacity:1;
    pointer-events:auto;
}

const $signPopup = $("#sign-popup");

// Butona tıklandığında popup'ımıza active class'ı basılsın. Böylece popup açılmış olacka.
$("#open-sign-popup").on("click",function(){ $signPopup.addClass("active"); });

// popup'taki siyah arkaplana tıklanırsa popup kapansın.
$signPopup.on("click", ".my-popup-backdrop", function() {
    const $contents = $(this).closest(".my-popup").removeClass("active");
});

// popup'taki sekmelere tıklanınca, sekmeyle aynı sıradaki içerik görüntülensin.
$signPopup.on("click", ".my-popup-tabs > .my-popup-tab", function() {
    const $thisTab = $(this);
    $thisTab.siblings().removeClass("active");
    $thisTab.addClass("active");
    // Tıklanan sekmenin kaçıncı sırada olduğunu bul:
    const indexOfThisTab = $thisTab.index();
    const $contents = $thisTab.closest(".my-popup-window").find(".my-popup-tab-content");
    // Tıklanan sekme kaçıncı sıradaysa o sıradaki içeriği aktif et.
    $contents.removeClass("active").eq(indexOfThisTab).addClass("active");
});

Burada JQuery ile sadece neye ne zaman active class'ı verileceğini ayarladık. Animasyon işini tamamen CSS'e bıraktık.