Web Designer Wall

Snippets Animation

Bootstrap 5 Animated Login / Sign Up Form

A login and sign-up card with a pill tab switcher that flips between the two forms using a short rotate animation, built with floating-label inputs.

Bootstrap 5 No jQuery Apr 2020 2.3K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 980px">
    <div class="wdw-card auth overflow-hidden">
      <div class="row g-0">
        <aside class="col-md-5 wdw-aurora auth-brand d-flex flex-column justify-content-between p-4 p-lg-5">
          <div class="d-flex align-items-center gap-2 fw-bold"><i class="bi bi-stack fs-4" aria-hidden="true"></i> Northwind</div>
          <div class="my-4 my-md-5">
            <h2 class="wdw-heading h3 mb-2">Everything your team ships, in one place.</h2>
            <p class="mb-0 auth-brand-copy">Plan, track and release with a workspace that stays out of your way. Free for teams up to five.</p>
          </div>
          <figure class="auth-quote d-none d-md-block m-0 p-3 rounded-4">
            <blockquote class="small mb-2">“We cut our release meetings in half in the first month.”</blockquote>
            <figcaption class="small fw-semibold">Priya Nair <span class="opacity-75 fw-normal">· Head of Product</span></figcaption>
          </figure>
        </aside>

        <div class="col-md-7 p-4 p-sm-5">
          <div class="mb-4">
            <h1 class="wdw-heading h3 mb-1" id="auth-title">Welcome back</h1>
            <p class="wdw-muted small mb-0" id="auth-sub">Log in to continue to your account.</p>
          </div>

          <div class="nav nav-pills nav-fill p-1 rounded-pill bg-body-tertiary mb-4" role="tablist" aria-label="Account">
            <button class="nav-link rounded-pill active" id="tab-login" type="button" role="tab" aria-selected="true" aria-controls="panel-login" data-auth-tab="login">Log in</button>
            <button class="nav-link rounded-pill" id="tab-signup" type="button" role="tab" aria-selected="false" aria-controls="panel-signup" data-auth-tab="signup" tabindex="-1">Sign up</button>
          </div>

          <form class="auth-face" id="panel-login" role="tabpanel" aria-labelledby="tab-login" novalidate>
            <div class="form-floating mb-3">
              <input type="email" class="form-control" id="li-email" placeholder="Email" autocomplete="email" required>
              <label for="li-email">Email address</label>
            </div>
            <div class="position-relative mb-3">
              <div class="form-floating">
                <input type="password" class="form-control pe-5" id="li-pass" placeholder="Password" autocomplete="current-password" required>
                <label for="li-pass">Password</label>
              </div>
              <button type="button" class="auth-eye" data-toggle-pass="li-pass" aria-label="Show password" aria-pressed="false"><i class="bi bi-eye" aria-hidden="true"></i></button>
            </div>
            <div class="d-flex justify-content-between align-items-center mb-4">
              <div class="form-check m-0"><input class="form-check-input" type="checkbox" id="li-keep" checked><label class="form-check-label small" for="li-keep">Keep me signed in</label></div>
              <a href="#" class="small fw-semibold text-decoration-none">Forgot password?</a>
            </div>
            <button class="btn btn-primary rounded-pill w-100" type="submit">Log in</button>
            <div class="auth-or my-4 small wdw-muted"><span>or continue with</span></div>
            <div class="row g-2">
              <div class="col-6"><button type="button" class="btn btn-outline-secondary rounded-pill w-100"><i class="bi bi-google" aria-hidden="true"></i> Google</button></div>
              <div class="col-6"><button type="button" class="btn btn-outline-secondary rounded-pill w-100"><i class="bi bi-github" aria-hidden="true"></i> GitHub</button></div>
            </div>
            <p class="text-center small wdw-muted mt-4 mb-0">New here? <button type="button" class="btn btn-link auth-link p-0 small fw-semibold text-decoration-none" data-auth-tab="signup">Create an account</button></p>
          </form>

          <form class="auth-face" id="panel-signup" role="tabpanel" aria-labelledby="tab-signup" novalidate hidden>
            <div class="row g-2 mb-3">
              <div class="col-6"><button type="button" class="btn btn-outline-secondary rounded-pill w-100"><i class="bi bi-google" aria-hidden="true"></i> Google</button></div>
              <div class="col-6"><button type="button" class="btn btn-outline-secondary rounded-pill w-100"><i class="bi bi-github" aria-hidden="true"></i> GitHub</button></div>
            </div>
            <div class="auth-or mb-3 small wdw-muted"><span>or sign up with email</span></div>
            <div class="form-floating mb-3">
              <input type="text" class="form-control" id="su-name" placeholder="Name" autocomplete="name" required>
              <label for="su-name">Full name</label>
            </div>
            <div class="form-floating mb-3">
              <input type="email" class="form-control" id="su-email" placeholder="Email" autocomplete="email" required>
              <label for="su-email">Email address</label>
            </div>
            <div class="position-relative mb-4">
              <div class="form-floating">
                <input type="password" class="form-control pe-5" id="su-pass" placeholder="Password" autocomplete="new-password" required aria-describedby="su-hint">
                <label for="su-pass">Password</label>
              </div>
              <button type="button" class="auth-eye" data-toggle-pass="su-pass" aria-label="Show password" aria-pressed="false"><i class="bi bi-eye" aria-hidden="true"></i></button>
              <div id="su-hint" class="form-text">At least 8 characters.</div>
            </div>
            <button class="btn btn-primary rounded-pill w-100" type="submit">Create account</button>
            <p class="text-center small wdw-muted mt-4 mb-0">Already a member? <button type="button" class="btn btn-link auth-link p-0 small fw-semibold text-decoration-none" data-auth-tab="login">Log in</button></p>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Related snippets

More animation snippets