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 id="phone">
    <div class="screen">
        <h1>Historical letters</h1>
        <div class="empty">
            <svg viewBox="0 0 48 48">
                <path d="M47.3296 9.02336C46.9238 8.85514 46.4566 8.94821 46.1461 9.25869L26.2748 29.13C26.1703 29.2345 26.0916 29.3551 26.0386 29.4836C25.9866 29.6094 25.9576 29.7471 25.9567 29.8914C25.9567 29.892 25.9567 29.8925 25.9567 29.8929C25.9567 29.8932 25.9567 29.8933 25.9567 29.8934C25.9567 29.8938 25.9567 29.8941 25.9567 29.8946C25.9567 29.8949 25.9567 29.8951 25.9567 29.8954C25.9567 29.8958 25.9567 29.8959 25.9567 29.8962C25.9567 29.8967 25.9567 29.8973 25.9567 29.8979C25.9567 37.2506 19.975 43.2324 12.6223 43.2324C6.85987 43.2324 2.17195 38.5443 2.17195 32.7821C2.17195 28.2919 5.82494 24.639 10.315 24.639C13.7874 24.639 16.6122 27.4639 16.6122 30.9362C16.6122 33.5944 14.4497 35.7569 11.7916 35.7569C9.78483 35.7569 8.15229 34.1242 8.15229 32.1175C8.15229 30.6319 9.36098 29.4232 10.8466 29.4232C11.4463 29.4232 11.9326 28.9371 11.9326 28.3373C11.9326 27.7375 11.4463 27.2513 10.8466 27.2513C8.16337 27.2513 5.98034 29.4343 5.98034 32.1175C5.98034 35.3219 8.58722 37.9288 11.7916 37.9288C13.6865 37.9288 15.4077 37.1712 16.6683 35.943C16.6915 35.9233 16.7141 35.9026 16.736 35.8808L36.6075 16.0094C37.9281 14.6887 38.6555 12.9328 38.6555 11.065C38.6555 6.39509 34.8563 2.5957 30.1864 2.5957C27.4311 2.5957 24.8408 3.66864 22.8925 5.61688L3.02118 25.4882C2.99522 25.5142 2.97079 25.5412 2.94798 25.569C1.12539 27.4303 0 29.9774 0 32.7821C0 39.7421 5.66237 45.4043 12.6223 45.4043C16.8781 45.4043 20.7386 43.6813 23.5432 40.8958C23.5763 40.8697 23.6081 40.8415 23.6385 40.811L43.4582 20.9913C46.387 18.0626 48 14.1685 48 10.0267C48 9.58741 47.7353 9.19147 47.3296 9.02336ZM24.4283 7.15266C25.9663 5.61471 28.0111 4.76765 30.1862 4.76765C33.6586 4.76765 36.4835 7.59259 36.4835 11.065C36.4835 12.3526 35.9821 13.5632 35.0715 14.4737L18.7826 30.7627C18.6899 26.1724 14.9271 22.4669 10.315 22.4669C9.88181 22.4669 9.45426 22.4939 9.03497 22.546L24.4283 7.15266ZM41.9225 19.4555L27.6501 33.7279C27.9264 32.6444 28.0883 31.5148 28.1221 30.3545L45.5033 12.9732C44.9566 15.4096 43.7313 17.6467 41.9225 19.4555Z" fill="currentColor"/>
            </svg>
            <span>No more letters</span>
        </div>
        <div class="content">
            <div class="entries" style="height: 4000px;">
                <article>
                    <div class="compact"></div>
                    <div class="inner">
                        <div class="info">
                            <strong>December 23nd, 2020</strong>
                            <small>The year is almost over</small>
                        </div>
                        <div class="text">
                            <p>Dear People,</p>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
                            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
                        </div>
                    </div>
                </article>
                <article>
                    <div class="compact"></div>
                    <div class="inner">
                        <div class="info">
                            <strong>December 24nd, 2020</strong>
                            <small>Merry christmas</small>
                        </div>
                        <div class="text">
                            <p>Dear People,</p>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
                            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
                        </div>
                    </div>
                </article>
                <article>
                    <div class="compact"></div>
                    <div class="inner">
                        <div class="info">
                            <strong>January 1st, 2021</strong>
                            <small>Happy new year</small>
                        </div>
                        <div class="text">
                            <p>Dear People,</p>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
                            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </div>
    <div class="time">11:30</div>
    <svg class="battery" viewBox="0 0 25 12">
        <rect opacity="0.35" x="0.5" y="0.833374" width="21" height="10.3333" rx="2.16667" fill="none" stroke="currentColor" />
        <path opacity="0.4" d="M23 4V8C23.8047 7.66122 24.328 6.87313 24.328 6C24.328 5.12687 23.8047 4.33878 23 4" fill="currentColor" />
        <rect x="2" y="2.33337" width="18" height="7.33333" rx="1.33333" fill="currentColor" />
    </svg>
    <svg class="wifi" viewBox="0 0 16 12">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.33045 2.60802C10.5463 2.60811 12.6775 3.45955 14.2835 4.98635C14.4044 5.10422 14.5977 5.10274 14.7168 4.98302L15.8728 3.81635C15.9331 3.75563 15.9667 3.67338 15.9662 3.58779C15.9657 3.50221 15.9311 3.42036 15.8701 3.36035C11.655 -0.679198 5.00522 -0.679198 0.79012 3.36035C0.729062 3.42032 0.694418 3.50215 0.693855 3.58773C0.693292 3.67331 0.726856 3.75558 0.78712 3.81635L1.94345 4.98302C2.06248 5.10292 2.25593 5.10441 2.37679 4.98635C3.98294 3.45945 6.11434 2.60801 8.33045 2.60802ZM8.33045 6.40368C9.54794 6.40361 10.722 6.85614 11.6245 7.67335C11.7465 7.78933 11.9388 7.78682 12.0578 7.66768L13.2125 6.50102C13.2733 6.43982 13.307 6.3568 13.3061 6.27054C13.3052 6.18427 13.2698 6.10196 13.2078 6.04202C10.4596 3.48563 6.20365 3.48563 3.45545 6.04202C3.39338 6.10196 3.35796 6.18432 3.35714 6.27061C3.35633 6.3569 3.39019 6.43991 3.45112 6.50102L4.60545 7.66768C4.72444 7.78682 4.91672 7.78933 5.03879 7.67335C5.94066 6.85668 7.11377 6.40419 8.33045 6.40368ZM10.6434 8.9575C10.6452 9.04401 10.6112 9.12741 10.5495 9.18802L8.55212 11.2037C8.49357 11.2629 8.41374 11.2963 8.33045 11.2963C8.24716 11.2963 8.16734 11.2629 8.10879 11.2037L6.11112 9.18802C6.04941 9.12736 6.01546 9.04394 6.01729 8.95743C6.01912 8.87092 6.05657 8.789 6.12079 8.73102C7.39636 7.65213 9.26455 7.65213 10.5401 8.73102C10.6043 8.78905 10.6417 8.87099 10.6434 8.9575Z" fill="currentColor" />
    </svg>
    <svg class="cellular" viewBox="0 0 18 12">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M16.6665 0.666626H15.6665C15.1142 0.666626 14.6665 1.11434 14.6665 1.66663V10.3333C14.6665 10.8856 15.1142 11.3333 15.6665 11.3333H16.6665C17.2188 11.3333 17.6665 10.8856 17.6665 10.3333V1.66663C17.6665 1.11434 17.2188 0.666626 16.6665 0.666626ZM10.9998 2.99996H11.9998C12.5521 2.99996 12.9998 3.44767 12.9998 3.99996V10.3333C12.9998 10.8856 12.5521 11.3333 11.9998 11.3333H10.9998C10.4476 11.3333 9.99984 10.8856 9.99984 10.3333V3.99996C9.99984 3.44767 10.4476 2.99996 10.9998 2.99996ZM7.33317 5.33329H6.33317C5.78089 5.33329 5.33317 5.78101 5.33317 6.33329V10.3333C5.33317 10.8856 5.78089 11.3333 6.33317 11.3333H7.33317C7.88546 11.3333 8.33317 10.8856 8.33317 10.3333V6.33329C8.33317 5.78101 7.88546 5.33329 7.33317 5.33329ZM2.6665 7.33329H1.6665C1.11422 7.33329 0.666504 7.78101 0.666504 8.33329V10.3333C0.666504 10.8856 1.11422 11.3333 1.6665 11.3333H2.6665C3.21879 11.3333 3.6665 10.8856 3.6665 10.3333V8.33329C3.6665 7.78101 3.21879 7.33329 2.6665 7.33329Z" fill="currentColor" />
    </svg>
</div>

<!-- dribbble - twitter -->
<a class="dribbble" href="https://dribbble.com/ai" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
<a class="twitter" target="_top" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>
              
            
!

CSS

              
                #phone {
    --c-frame: black;
    --c-interface: black;
    --c-headline: black;
    --c-screen: #e4e2e2;
    --c-letter: #fff;
    --c-date: black;
    --c-subline: #898989;
    --c-text: #A7A7A7;
    --empty-mask: 100%;
    --headline-y: 0;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    width: 375px;
    color: var(--c-interface);
    @media(min-width: 501px) {
        border-radius: 9.6% / 4.43%;
        box-shadow: 0 0 0 10px var(--c-frame);
        &:before {
            content: '';
            position: absolute;
            z-index: 1;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            height: 30px;
            width: 200px;
            border-radius: 0 0 16px 16px;
            background: var(--c-frame);
        }
    }
    .time,
    .battery,
    .cellular,
    .wifi {
        position: absolute;
        top: 17px;
        @media(max-width: 500px) {
            display: none;
        }
    }
    .time {
        left: 21px;
        top: 15px;
        font-size: 100%;
        font-weight: 600;
    }
    .battery {
        right: 15px;
        width: 25px;
        height: 12px;
    }
    .cellular {
        right: 64px;
        width: 18px;
        height: 12px;
    }
    .wifi {
        right: 44px;
        width: 16px;
        height: 12px;
    }
    .screen {
        position: relative;
        width: 100%;
        @media(min-width: 501px) {
            padding-bottom: 216.533333333%;
            background: var(--c-screen);
            transform: translateZ(0);
            border-radius: 36px;
            overflow: hidden;
            -webkit-mask-image: -webkit-radial-gradient(white, black);
        }
        @media(max-width: 500px) {
            height: 100vh;
        }
        h1 {
            font-size: 30px;
            font-family: 'DM Serif Display', serif;
            font-weight: normal;
            color: var(--c-headline);
            text-align: center;
            margin: 0;
            position: absolute;
            top: 92px;
            left: 0;
            right: 0;
            transform: translateY(var(--headline-y)) translateZ(0);
        }
        .empty {
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            text-align: center;
            color: var(--c-text);
            -webkit-mask-image: linear-gradient(to left, transparent var(--empty-mask), black calc(var(--empty-mask) + 10%));
            mask-image: linear-gradient(to left, transparent var(--empty-mask), black calc(var(--empty-mask) + 10%));
            svg {
                display: block;
                width: 48px;
                height: 48px;
                margin: 0 auto 12px auto;
            }
            span {
                display: block;
                font-size: 20px;
                font-family: 'DM Serif Display', serif;
            }
        }
        .content {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            overflow-y: scroll;
            overflow-x: hidden;
            -ms-overflow-style: none;
            scrollbar-width: none;
            &::-webkit-scrollbar {
                display: none;
            }
            .entries {
                article {
                    --clip: 0px;
                    --compact-s: 0;
                    --spacing: 32px;
                    --border-radius-h: 0px;
                    --border-radius-v: 0px;
                    --article-r: 0deg;
                    --article-x: 0;
                    --article-y: 0;
                    --to-article-r: -4deg;
                    --to-article-x: -4px;
                    --to-article-y: -44px;
                    --compact-o: 0;
                    margin-top: var(--spacing);
                    margin-left: 20px;
                    margin-right: 20px;
                    margin-bottom: 0;
                    position: sticky;
                    top: 184px;
                    transform-origin: 50% 12px;
                    transform: translate(var(--article-x), var(--article-y)) rotate(var(--article-r)) translateZ(0);
                    border-radius: var(--border-radius-h) 0px 0px 0px / var(--border-radius-v) 0px 0px 0px;
                    &:first-of-type {
                        --spacing: 184px;
                    }
                    &:nth-child(2) {
                        --to-article-r: -3deg;
                        --to-article-x: -2px;
                        --to-article-y: -36px;
                    }
                    &:nth-child(3) {
                        --to-article-r: 1deg;
                        --to-article-y: -8px;
                    }
                    .compact {
                        position: absolute;
                        left: 0;
                        right: 0;
                        transform-origin: 50% 0;
                        transform: scaleY(var(--compact-s));
                        z-index: 1;
                        &:before,
                        &:after {
                            content: '';
                        }
                        &:before {
                            position: absolute;
                            left: 0;
                            right: 0;
                            top: 0;
                            height: 60px;
                            filter: blur(3px);
                            background: linear-gradient(rgba(#000, .15), rgba(#000, 0));
                            opacity: var(--compact-o);
                        }
                        &:after {
                            position: relative;
                            z-index: 1;
                            display: block;
                            width: 100%;
                            height: 24px;
                            background: linear-gradient(#d5d5d5, #ffffff 65%, #dddddd);
                            box-shadow: 0 4px 5px rgba(0, 0, 0, .08);
                        }
                    }
                    .inner {
                        transform: translateY(calc(var(--clip) * -1));
                        clip-path: polygon(0 var(--clip), 100% var(--clip), 100% 100%, 0% 100%);
                        background: var(--c-letter);
                        .info {
                            padding: 24px;
                            border-bottom: 1px solid var(--c-screen);
                            strong {
                                color: var(--c-date);
                                display: block;
                                font-family: 'DM Serif Display', serif;
                                font-size: 21px;
                                margin-bottom: 4px;
                            }
                            small {
                                color: var(--c-subline);
                                display: block;
                                font-size: 14px;
                                font-family: 'Poppins';
                                font-weight: 500;
                            }
                        }
                        .text {
                            padding: 24px;
                            color: var(--c-text);
                            font-family: 'Poppins';
                            font-size: 14px;
                            line-height: 1.6;
                            p {
                                margin: 0;
                                &:not(:last-child) {
                                    margin-bottom: 16px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

// Center & dribbble
body {
    min-height: 100vh;
    display: flex;
    font-family: 'Inter', Arial;
    justify-content: center;
    align-items: center;
    background: #F0F0F0;
    @media(min-width: 501px) {
        padding: 24px;
    }
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        img {
            display: block;
            height: 28px;
        }
    }
    .twitter {
        position: fixed;
        display: block;
        right: 64px;
        bottom: 14px;
        svg {
            width: 32px;
            height: 32px;
            fill: #1da1f2;
        }
    }
}
              
            
!

JS

              
                const { to, set, timeline, registerPlugin } = gsap

registerPlugin(ScrollTrigger)

const phoneElem = document.querySelector('#phone')
const timeElem = phoneElem.querySelector('.time')
const contentElem = phoneElem.querySelector('.content')
const articles = contentElem.querySelectorAll('article')

setTime(timeElem)
setInterval(() => setTime(timeElem), 5000)

articles.forEach((article, index) => {
    roll(contentElem, article, articles, index)
})

contentElem.addEventListener('scroll', e => {
    if(contentElem.scrollTop > 2550) {
        contentElem.scrollTop = 2550
    }
})

function roll(content, article, articles, index) {
    let animation = timeline().to(article, {
        '--clip': `${article.offsetHeight + 112}px`,
        '--compact-s': 1,
        '--compact-o': 1,
        duration: 1,
        delay: .05,
        ease: 'none'
    }).to(article, {
        '--border-radius-h': '180px',
        '--border-radius-v': '20px',
        repeat: 1,
        yoyo: true,
        duration: .15,
        onStart() {
            article.style.overflow = 'hidden'
        },
        onComplete() {
            article.style.overflow = 'visible'
        }
    }, 0).to(article, {
        '--article-r': getComputedStyle(article).getPropertyValue('--to-article-r'),
        '--article-x': getComputedStyle(article).getPropertyValue('--to-article-x'),
        '--article-y': getComputedStyle(article).getPropertyValue('--to-article-y'),
        duration: .15
    })

    if(index === 0) {
        animation.to(phoneElem, {
            '--headline-y': '-28px',
            duration: .3
        }, 1.05)
    }

    if(index === 1) {
        animation.to(articles[index - 1], {
            '--article-y': '-64px',
            '--article-r': '-2deg',
            duration: .15
        }, 1.08)
    }

    if(index === 2) {
        animation.to(articles[index - 2], {
            '--article-y': '-70px',
            duration: .15
        }, 1.14)
        animation.to(articles[index - 1], {
            '--article-y': '-42px',
            '--article-r': '-2deg',
            duration: .15
        }, 1.08)
    }

    if(index === articles.length - 1) {
        animation.to(phoneElem, {
            '--empty-mask': '0%',
            duration: .3
        })
    }

    return ScrollTrigger.create({
        animation,
        trigger: article,
        scroller: content,
        scrub: true,
        start: `top top+=184`,
        end: `bottom top+=112`
    })
}

function setTime(elem) {
    elem.textContent = new Date().toLocaleTimeString('en-US', {
        hour12: false,
        hour: 'numeric',
        minute: 'numeric',
    })
}

// Keep same progress after resize (Thanks to https://codepen.io/ZachSaucier)
const progressST = ScrollTrigger.create({
    scroller: contentElem,
    start: 0,
    end: 2550
})

let oldProgress

ScrollTrigger.addEventListener('refreshInit', () => {
    oldProgress = progressST.progress
    contentElem.scrollTop = 0
})

ScrollTrigger.addEventListener('refresh', () => {
    progressST.scroll(oldProgress * 2550)
})
              
            
!
999px

Console