Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="hero__wrapper">
    <img class="hero__image" src="https://assets.codepen.io/2479807/hero_1.jpg" alt="">
    <header class="header">
        <div class="container">
            <div class="header__inner">
                <button class="menu-toggle">
                    <div class="hamburger">
                        <span class="hamburger__line"></span>
                        <span class="hamburger__line"></span>
                        <span class="hamburger__line"></span>
                    </div>
                    <span>Menu</span>
                </button>
                <svg class="logo" width="63" height="22" viewBox="0 0 63 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16.1484 15.2031V17.7812C14.4297 18.7188 12.4453 19.1875 10.1953 19.1875C8.36719 19.1875 6.81641 18.8203 5.54297 18.0859C4.26953 17.3516 3.26172 16.3398 2.51953 15.0508C1.77734 13.7617 1.40625 12.3672 1.40625 10.8672C1.40625 8.48438 2.25391 6.48047 3.94922 4.85547C5.65234 3.23047 7.75 2.41797 10.2422 2.41797C11.9609 2.41797 13.8711 2.86719 15.9727 3.76562V6.28516C14.0586 5.19141 12.1875 4.64453 10.3594 4.64453C8.48438 4.64453 6.92578 5.23828 5.68359 6.42578C4.44922 7.60547 3.83203 9.08594 3.83203 10.8672C3.83203 12.6641 4.44141 14.1406 5.66016 15.2969C6.87891 16.4531 8.4375 17.0312 10.3359 17.0312C12.3203 17.0312 14.2578 16.4219 16.1484 15.2031ZM21.0234 8.21875V10.6914L21.1406 10.5039C22.1719 8.83984 23.2031 8.00781 24.2344 8.00781C25.0391 8.00781 25.8789 8.41406 26.7539 9.22656L25.6289 11.1016C24.8867 10.3984 24.1992 10.0469 23.5664 10.0469C22.8789 10.0469 22.2812 10.375 21.7734 11.0312C21.2734 11.6875 21.0234 12.4648 21.0234 13.3633V19H18.8789V8.21875H21.0234ZM37.4414 13.7969H29.8594C29.9141 14.8281 30.2578 15.6484 30.8906 16.2578C31.5312 16.8672 32.3555 17.1719 33.3633 17.1719C34.7695 17.1719 36.0664 16.7344 37.2539 15.8594V17.9453C36.5977 18.3828 35.9453 18.6953 35.2969 18.8828C34.6562 19.0703 33.9023 19.1641 33.0352 19.1641C31.8477 19.1641 30.8867 18.918 30.1523 18.4258C29.418 17.9336 28.8281 17.2734 28.3828 16.4453C27.9453 15.6094 27.7266 14.6445 27.7266 13.5508C27.7266 11.9102 28.1914 10.5781 29.1211 9.55469C30.0508 8.52344 31.2578 8.00781 32.7422 8.00781C34.1719 8.00781 35.3125 8.50781 36.1641 9.50781C37.0156 10.5078 37.4414 11.8477 37.4414 13.5273V13.7969ZM29.9062 12.5195H35.332C35.2773 11.668 35.0234 11.0117 34.5703 10.5508C34.1172 10.0898 33.5078 9.85938 32.7422 9.85938C31.9766 9.85938 31.3477 10.0898 30.8555 10.5508C30.3711 11.0117 30.0547 11.668 29.9062 12.5195ZM46.5352 12.5195V17.1016C46.5352 17.4688 46.6602 17.6523 46.9102 17.6523C47.168 17.6523 47.5703 17.4609 48.1172 17.0781V18.3789C47.6328 18.6914 47.2422 18.9023 46.9453 19.0117C46.6562 19.1289 46.3516 19.1875 46.0312 19.1875C45.1172 19.1875 44.5781 18.8281 44.4141 18.1094C43.5078 18.8125 42.543 19.1641 41.5195 19.1641C40.7695 19.1641 40.1445 18.918 39.6445 18.4258C39.1445 17.9258 38.8945 17.3008 38.8945 16.5508C38.8945 15.8711 39.1367 15.2656 39.6211 14.7344C40.1133 14.1953 40.8086 13.7695 41.707 13.457L44.4375 12.5195V11.9453C44.4375 10.6484 43.7891 10 42.4922 10C41.3281 10 40.1953 10.6016 39.0938 11.8047V9.47266C39.9219 8.49609 41.1133 8.00781 42.668 8.00781C43.832 8.00781 44.7656 8.3125 45.4688 8.92188C45.7031 9.11719 45.9141 9.37891 46.1016 9.70703C46.2891 10.0273 46.4062 10.3516 46.4531 10.6797C46.5078 11 46.5352 11.6133 46.5352 12.5195ZM44.4375 16.8672V13.668L43.0078 14.2188C42.2812 14.5078 41.7656 14.8008 41.4609 15.0977C41.1641 15.3867 41.0156 15.75 41.0156 16.1875C41.0156 16.6328 41.1562 16.9961 41.4375 17.2773C41.7266 17.5586 42.0977 17.6992 42.5508 17.6992C43.2305 17.6992 43.8594 17.4219 44.4375 16.8672ZM50.0508 2.62891H52.1836V19H50.0508V2.62891Z" fill="black" />
                    <circle cx="59" cy="6" r="3.5" fill="white" stroke="black" />
                </svg>
                <svg class="cart" width="50" height="20" viewBox="0 0 50 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4.35411 7.844C3.41811 7.844 2.71011 8.228 2.25411 8.852V5.6H0.958109V14H2.25411V13.136C2.71011 13.772 3.41811 14.156 4.35411 14.156C5.98611 14.156 7.34211 12.776 7.34211 11C7.34211 9.212 5.98611 7.844 4.35411 7.844ZM4.15011 12.92C3.07011 12.92 2.25411 12.116 2.25411 11C2.25411 9.884 3.07011 9.08 4.15011 9.08C5.23011 9.08 6.04611 9.884 6.04611 11C6.04611 12.116 5.23011 12.92 4.15011 12.92ZM12.9087 8V8.852C12.4527 8.228 11.7447 7.844 10.8087 7.844C9.1767 7.844 7.8207 9.212 7.8207 11C7.8207 12.776 9.1767 14.156 10.8087 14.156C11.7447 14.156 12.4527 13.772 12.9087 13.136V14H14.2047V8H12.9087ZM11.0127 12.92C9.9327 12.92 9.1167 12.116 9.1167 11C9.1167 9.884 9.9327 9.08 11.0127 9.08C12.0927 9.08 12.9087 9.884 12.9087 11C12.9087 12.116 12.0927 12.92 11.0127 12.92ZM20.1313 8V8.888C19.6753 8.24 18.9673 7.844 18.0433 7.844C16.3513 7.844 15.0193 9.224 15.0193 10.94C15.0193 12.656 16.3513 14.036 18.0433 14.036C18.9673 14.036 19.6753 13.64 20.1313 12.992V13.724C20.1313 14.768 19.4593 15.38 18.3433 15.38C17.2993 15.38 16.8553 14.972 16.5913 14.456L15.4753 15.104C15.9793 16.064 16.9993 16.556 18.3193 16.556C19.8913 16.556 21.4033 15.656 21.4033 13.724V8H20.1313ZM18.2233 12.824C17.1313 12.824 16.3153 12.02 16.3153 10.94C16.3153 9.86 17.1313 9.056 18.2233 9.056C19.3153 9.056 20.1313 9.86 20.1313 10.94C20.1313 12.02 19.3153 12.824 18.2233 12.824Z" fill="black" fill-opacity="0.5" />
                    <circle cx="40" cy="10" r="9.5" stroke="black" stroke-opacity="0.5" />
                    <path d="M39.6316 6.6L37.4236 7.38L37.7596 8.556L39.4516 8.076V15H40.8316V6.6H39.6316Z" fill="black" fill-opacity="0.5" />
                </svg>

            </div>
        </div>
    </header>

    <div class="container">
        <section class="hero">
            <div class="hero__content">
                <h1 class="hero__title">Carefully crafted yogawear</h1>

                <button class="button button--white">
                    <div class="hero__button__wrapper">
                        <span>Shop now</span>
                    </div>
                </button>

            </div>

        </section>
    </div>
</div>
              
            
!

CSS

              
                @font-face {
    src: url("https://assets.codepen.io/2479807/SilkRegular.woff2")
        format("woff2");
    font-family: "Silk Serif";
}

@font-face {
    src: url("https://assets.codepen.io/2479807/gilroy-semibold.woff2")
        format("woff2");
    font-family: "Gilroy SemiBold";
}

@font-face {
    src: url("https://assets.codepen.io/2479807/gilroy-regular.ttf")
        format("truetype");
    font-family: "Gilroy Regular";
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --font-size--small: 14px;
    --color-white: #ffffff;
    --color-black: #000000;
}

img {
    max-width: 100%;
}

body {
    font-family: "Gilroy Regular";
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

span {
    font-family: "Gilroy Regular";
}

h1,
h2,
h3 {
    font-family: "Silk Serif", sans-serif;
}

h1 {
    font-size: 80px;
    letter-spacing: -0.04em;
    margin-bottom: 64px;
    line-height: 1;
}

.container {
    margin: 0 auto;
    padding: 0 40px;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    &--black {
        background-color: black;
        opacity: 0.15;
    }
}

.button {
    display: inline-block;
    padding: 16px 32px;
    outline: none;
    border: none;
    text-transform: uppercase;
    background-color: none;
    border-radius: 100px;
    letter-spacing: 0.02em;
    font-size: var(--font-size--small);
    font-family: "Gilroy SemiBold";

    span {
        font-size: var(--font-size--small);
        font-family: "Gilroy SemiBold";
    }

    &--white {
        background-color: var(--color-white);
    }
}

.header {
    padding: 32px 0;

    &__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.menu-toggle {
    display: flex;
    align-items: center;

    background: none;
    border: none;
    outline: none;

    font-size: 12px;

    .hamburger {
        margin-right: 8px;
    }
}

.hamburger {
    display: inline-block;

    &__line {
        display: block;
        width: 32px;
        height: 1px;
        background-color: var(--color-black);

        &:not(:last-child) {
            margin-bottom: 8px;
        }
    }
}

.hero {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 172px);
    margin-bottom: 86px;

    &__wrapper {
        position: relative;
    }

    &__image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        max-width: 100vw;
    }

    &__content {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    &__title {
        max-width: 600px;
        text-align: center;
        color: var(--color-white);
        opacity: 0;
    }

    .button {
        width: 50px;
        height: 50px;
        padding: 0;
        transform: scale(0);

        .hero__button__wrapper {
            position: relative;
            height: 20px;
            overflow: hidden;

            span {
                position: absolute;
                top: 50%;
                left: 50%;
                opacity: 0;
                white-space: nowrap;
            }
        }
    }
}

              
            
!

JS

              
                const hero = document.querySelector(".hero");
const title = document.querySelector(".hero__title");
const image = document.querySelector(".hero__image");
const buttonText = document.querySelector(".hero .button span");
const menuToggle = document.querySelector(".menu-toggle");
const cart = document.querySelector(".cart");
const logo = document.querySelector(".logo");

const setInitialStates = () => {
    gsap.set(title, {
        autoAlpha: 1
    });

    gsap.set(split.lines, {
        y: 40,
        autoAlpha: 0
    });

    gsap.set(buttonText, {
        x: "-50%",
        y: "50%"
    });

    gsap.set([logo, cart, menuToggle], {
        y: -80,
        autoAlpha: 0
    });
};

const flipAnimation = () => {
    const state = Flip.getState(image);

    hero.appendChild(image);

    const tl = Flip.from(state, {
        duration: 2,
        ease: "power3.inOut"
    });

    return tl;
};

const master = gsap.timeline({
    delay: 0.5,
    defaults: {
        ease: "power3.inOut"
    }
});

const split = new SplitText(title, {
    type: "lines"
});

const animateTitle = () => {
    const tl = gsap.timeline();

    tl.to(split.lines, {
        y: 0,
        autoAlpha: 1,
        duration: 2.5,
        stagger: 0.3
    });

    return tl;
};

const animateImage = () => {
    const tl = gsap.timeline();

    tl.to(image, {
        borderRadius: "10px",
        duration: 1
    });

    return tl;
};

const animateButton = () => {
    const tl = gsap.timeline();

    tl.to(
        ".hero .button",
        {
            scale: 1,
            duration: 1
        },
        "-=2.8"
    )
        .to(
            ".hero .button",
            {
                width: "200px",
                duration: 2
            },
            "<"
        )
        .to(
            buttonText,
            {
                opacity: 1
            },
            "-=2"
        )
        .to(
            buttonText,
            {
                y: "-50%",
                duration: 1.5
            },
            "<"
        );

    return tl;
};

const animateMenuItems = () => {
    const tl = gsap.timeline({
        defaults: {
            duration: 2.5,
            y: 0,
            autoAlpha: 1,
            ease: "power3.inOut"
        }
    });

    tl.to([cart, menuToggle], {}).to(logo, {}, "-=2.3");

    return tl;
};

master
    .add(setInitialStates())
    .add(flipAnimation())
    .add(animateImage(), "<")
    .add(animateMenuItems(), "-=1.8")
    .add(animateTitle(), "-=2")
    .add(animateButton(), "-=2");

/*
GSDevTools.create({
    animation: master,
    paused: true,
    css: {
        zIndex: 10
    }
});
*/

              
            
!
999px

Console