back to lab

Scroll Reveal Animation (CSS)

April 2024

Easily create scroll reveal animations with CSS's animation-timeline property. This showcase uses avatars from my last 20 GitHub followers to demonstrate the effect. Note: not all browsers support this yet. For more details, check the MDN documentation..

    Unlock code snippet

    Enter your email to access all code snippets and subscribe to my newsletter for updates.

    import { useState } from "react";
    import Button from "./ui/Button";
    

    // Nice try lol, I promise I will not send you a tons of spam emails
    // I just want to build a newsletter list to share my latest content with you 🥹
    

    const INIT = "INIT";
    const SUBMITTING = "SUBMITTING";
    const ERROR = "ERROR";
    const SUCCESS = "SUCCESS";
    

    const formStates = [INIT, SUBMITTING, ERROR, SUCCESS] as const;
    

    

    function NewsletterForm() {
      return (
        <form>
          <input type="email" placeholder="
            Enter your email" />
            <Button type="submit">Subscribe</Button>
            </form>
            );
        }
    }
    Curved Tab Bar
    Underlay Action Sheet