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="task">
    <button class="pin">
        <svg viewBox="0 0 18 18">
            <path class="border" d="M14.8049 10.9883L15.3117 10.4354L15.3117 10.4354L14.8049 10.9883ZM13.6434 9.92354L13.1366 10.4764L13.1366 10.4764L13.6434 9.92354ZM14.0331 12.7609L14.0857 12.0128L14.0857 12.0128L14.0331 12.7609ZM10.7353 12.5777L10.763 11.8282L10.1199 11.8044L9.99873 12.4364L10.7353 12.5777ZM7.26468 12.5776L8.00126 12.4364L7.88007 11.8044L7.237 11.8282L7.26468 12.5776ZM3.96595 12.7609L3.91342 12.0128L3.91342 12.0128L3.96595 12.7609ZM3.19415 10.9883L3.70095 11.5411L3.70095 11.5411L3.19415 10.9883ZM4.3489 9.92976L4.85569 10.4826L4.85569 10.4826L4.3489 9.92976ZM5.1985 8.47405L5.93251 8.62809L5.93251 8.62809L5.1985 8.47405ZM5.49954 6.125L4.74958 6.13227L4.74958 6.13227L5.49954 6.125ZM5.11988 5.0575L4.48842 5.46217L4.48842 5.46217L5.11988 5.0575ZM5.84279 2.19815L5.73858 1.45543L5.73858 1.45543L5.84279 2.19815ZM12.2243 2.20784L12.3316 1.46556L12.3316 1.46556L12.2243 2.20784ZM12.9265 5.01489L13.5462 5.43732L13.5462 5.43732L12.9265 5.01489ZM12.8005 8.48335L13.5344 8.32877L13.5344 8.32877L12.8005 8.48335ZM15.3117 10.4354L14.1502 9.37068L13.1366 10.4764L14.2981 11.5411L15.3117 10.4354ZM13.9806 13.5091C15.6285 13.6248 16.5542 11.5743 15.3117 10.4354L14.2981 11.5411C14.3512 11.5898 14.371 11.6362 14.3783 11.6779C14.3866 11.7251 14.3811 11.7836 14.3553 11.8427C14.3038 11.9606 14.2075 12.0213 14.0857 12.0128L13.9806 13.5091ZM10.7076 13.3272C11.8043 13.3677 12.9626 13.4376 13.9806 13.5091L14.0857 12.0128C13.0583 11.9406 11.8822 11.8695 10.763 11.8282L10.7076 13.3272ZM9.99873 12.4364C9.94088 12.7381 9.7145 13.8782 9.40666 14.9346C9.25126 15.4678 9.08495 15.9448 8.92243 16.276C8.83963 16.4448 8.77625 16.5369 8.74149 16.576C8.69136 16.6324 8.7787 16.5 9 16.5V18C9.42347 18 9.71299 17.7408 9.86234 17.5729C10.0271 17.3877 10.1605 17.1581 10.269 16.9368C10.4893 16.488 10.6842 15.9122 10.8468 15.3542C11.1749 14.2282 11.4118 13.0321 11.4719 12.7189L9.99873 12.4364ZM9 16.5C9.2213 16.5 9.30864 16.6324 9.25851 16.576C9.22374 16.5369 9.16037 16.4447 9.07756 16.276C8.91504 15.9448 8.74873 15.4678 8.59333 14.9345C8.28548 13.8781 8.05911 12.738 8.00126 12.4364L6.5281 12.7189C6.58814 13.032 6.82507 14.2281 7.15323 15.3542C7.31583 15.9122 7.51071 16.488 7.73096 16.9368C7.83953 17.158 7.97293 17.3877 8.13765 17.5729C8.287 17.7408 8.57652 18 9 18V16.5ZM4.01848 13.5091C5.03673 13.4376 6.19538 13.3676 7.29236 13.3271L7.237 11.8282C6.11757 11.8695 4.94108 11.9406 3.91342 12.0128L4.01848 13.5091ZM2.68736 10.4354C1.44492 11.5743 2.37057 13.6248 4.01848 13.5091L3.91342 12.0128C3.79157 12.0213 3.69527 11.9606 3.64379 11.8427C3.61802 11.7836 3.61248 11.7251 3.62079 11.6779C3.62811 11.6362 3.64789 11.5898 3.70095 11.5411L2.68736 10.4354ZM3.84211 9.37689L2.68736 10.4354L3.70095 11.5411L4.85569 10.4826L3.84211 9.37689ZM4.46449 8.32001C4.3816 8.71499 4.16359 9.0822 3.84211 9.37689L4.85569 10.4826C5.38374 9.99858 5.7787 9.36098 5.93251 8.62809L4.46449 8.32001ZM4.74958 6.13227C4.75571 6.76462 4.60614 7.64502 4.46449 8.32001L5.93251 8.62809C6.07576 7.94551 6.25735 6.92653 6.24951 6.11773L4.74958 6.13227ZM4.48842 5.46217C4.67841 5.75864 4.74813 5.98287 4.74958 6.13227L6.24951 6.11773C6.24417 5.56707 6.01277 5.06079 5.75134 4.65284L4.48842 5.46217ZM5.73858 1.45543C5.25838 1.52281 4.837 1.70793 4.51241 2.01652C4.18835 2.32459 4.00469 2.71404 3.92975 3.11628C3.78406 3.89825 4.03633 4.7567 4.48842 5.46217L5.75134 4.65284C5.43762 4.16328 5.34855 3.69066 5.40438 3.39102C5.43019 3.25246 5.483 3.16346 5.54592 3.10364C5.60831 3.04433 5.72442 2.97211 5.947 2.94088L5.73858 1.45543ZM8.99954 1.25C7.68255 1.25 6.60695 1.33359 5.73858 1.45543L5.947 2.94088C6.74021 2.82959 7.74582 2.75 8.99954 2.75V1.25ZM12.3316 1.46556C11.4511 1.33825 10.3527 1.25 8.99954 1.25V2.75C10.2877 2.75 11.314 2.83402 12.117 2.95013L12.3316 1.46556ZM13.5462 5.43732C14.0191 4.74358 14.2759 3.89212 14.1282 3.11273C14.0523 2.7127 13.867 2.32772 13.5454 2.02344C13.2236 1.71889 12.8066 1.53423 12.3316 1.46556L12.117 2.95013C12.3354 2.9817 12.4514 3.05333 12.5145 3.11301C12.5779 3.17297 12.6294 3.26017 12.6544 3.39214C12.7084 3.67675 12.623 4.12856 12.3068 4.59245L13.5462 5.43732ZM13.2495 6.125C13.2495 5.99699 13.3216 5.7669 13.5462 5.43732L12.3068 4.59245C12.0226 5.00936 11.7495 5.5461 11.7495 6.125H13.2495ZM13.5344 8.32877C13.3969 7.67632 13.2495 6.80785 13.2495 6.125H11.7495C11.7495 6.97138 11.9251 7.96644 12.0666 8.63793L13.5344 8.32877ZM14.1502 9.37068C13.8318 9.07879 13.6161 8.71697 13.5344 8.32877L12.0666 8.63792C12.2199 9.36615 12.614 9.99736 13.1366 10.4764L14.1502 9.37068Z" />
            <defs>
                <clipPath id="pin-path-mask">
                    <circle class="circle" cx="9" cy="18" r="18" />
                </clipPath>
            </defs>
            <path class="fill" clip-path="url(#pin-path-mask)" d="M8.99955 1.25C7.68255 1.25 6.60696 1.33359 5.73859 1.45543C5.25839 1.52281 4.837 1.70793 4.51241 2.01652C4.18836 2.32459 4.0047 2.71404 3.92976 3.11628C3.78407 3.89825 4.03634 4.7567 4.48843 5.46217C4.67841 5.75864 4.74814 5.98287 4.74959 6.13227C4.75572 6.76462 4.60615 7.64502 4.4645 8.32001C4.38161 8.71499 4.16359 9.0822 3.84212 9.37689L2.68737 10.4354C1.44493 11.5743 2.37058 13.6248 4.01848 13.5091C4.84187 13.4513 5.75706 13.3945 6.65721 13.3534C6.77003 13.8818 6.94289 14.6324 7.15324 15.3542C7.31584 15.9122 7.51071 16.488 7.73096 16.9368C7.83954 17.158 7.97294 17.3877 8.13766 17.5729C8.28701 17.7408 8.57653 18 9.00001 18C9.42348 18 9.713 17.7408 9.86235 17.5729C10.0271 17.3877 10.1605 17.1581 10.269 16.9368C10.4893 16.488 10.6842 15.9122 10.8468 15.3542C11.0571 14.6324 11.23 13.8818 11.3428 13.3535C12.2427 13.3945 13.1575 13.4513 13.9806 13.5091C15.6285 13.6248 16.5542 11.5743 15.3117 10.4354L14.1502 9.37068C13.8318 9.07879 13.6161 8.71697 13.5344 8.32877C13.3969 7.67632 13.2496 6.80785 13.2496 6.125C13.2496 5.99699 13.3216 5.7669 13.5462 5.43732C14.0191 4.74358 14.2759 3.89212 14.1282 3.11273C14.0523 2.7127 13.867 2.32772 13.5454 2.02344C13.2236 1.71889 12.8066 1.53423 12.3317 1.46556C11.4511 1.33825 10.3527 1.25 8.99955 1.25Z" />
        </svg>
    </button>
</div>
              
            
!

CSS

              
                .task {
    display: flex;
    justify-content: flex-end;
    width: 120px;
    border-radius: 0 8px 8px 0;
    margin-left: -72px;
    background: linear-gradient(to right, #27272B, #2C2C31);
}

.pin {
    --pin-color: #BABAC1;
    --pin-fill: #6E7BF2;
    --pin-fill-scale: 0;
    --pin-y: 0px;
    --pin-scale-x: 1;
    --pin-scale-y: 1;
    --pin-rotate: 0deg;
    --pin-circle-opacity: 0;
    --pin-circle-scale: 0;
    -webkit-appearance: none;
    outline: none;
    border: none;
    background: none;
    padding: 12px;
    margin: 0;
    position: relative;
    cursor: pointer;
    &.active {
        --pin-fill-scale: 1;
    }
    svg {
        display: block;
        width: 18px;
        height: 18px;
        position: relative;
        z-index: 1;
        pointer-events: none;
        fill: var(--pin-color);
        transform: translateY(var(--pin-y)) scale(var(--pin-scale-x), var(--pin-scale-y)) rotate(var(--pin-rotate));
        transform-origin: 50% 17px;
        .circle {
            transform: scale(var(--pin-fill-scale));
            transform-origin: 50% 100%;
        }
        .fill {
            fill: var(--pin-fill);
        }
    }
    &:before {
        content: '';
        display: block;
        width: 24px;
        height: 12px;
        border-radius: 50%;
        position: absolute;
        bottom: 6px;
        left: 9px;
        opacity: var(--pin-circle-opacity);
        background: var(--pin-fill);
        transform: scale(var(--pin-circle-scale)) translateZ(0);
    }
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #27272b;
}
              
            
!

JS

              
                const { to, fromTo } = gsap

document.querySelectorAll('.pin').forEach(pin => {
    let { classList } = pin
    pin.addEventListener('mouseenter', e => {
        if(classList.contains('animating')) {
            return
        }
        to(pin, {
            keyframes: [{
                '--pin-rotate': e.offsetX > 21 ? '-4deg' : '4deg',
                duration: .1
            }, {
                '--pin-rotate': e.offsetX > 21 ? '4deg' : '-4deg',
                duration: .1
            }, {
                '--pin-rotate': '0deg',
                duration: .1
            }],
        })
    })
    pin.addEventListener('click', e => {

        if(classList.contains('animating')) {
            return
        }
        classList.add('animating')

        if(classList.contains('active')) {
            to(pin, {
                keyframes: [{
                    '--pin-scale-y': .9,
                    '--pin-fill-scale': 0,
                    duration: .15
                }, {
                    '--pin-scale-y': 1,
                    duration: .25
                }],
                onComplete() {
                    classList.remove('active', 'animating')
                }
            })
            return
        }

        to(pin, {
            '--pin-circle-scale': 1,
            duration: .45,
            delay: .15,
            clearProps: true
        })

        to(pin, {
            keyframes: [{
                '--pin-circle-opacity': .35,
                duration: .2,
                delay: .15,
            }, {
                '--pin-circle-opacity': 0,
                duration: .3
            }]
        })

        to(pin, {
            keyframes: [{
                '--pin-y': '-4px',
                '--pin-scale-x': .925,
                duration: .1
            }, {
                '--pin-y': '1px',
                '--pin-scale-x': 1,
                '--pin-scale-y': .8,
                duration: .1,
                delay: .05
            }, {
                '--pin-y': '0px',
                '--pin-scale-y': 1,
                '--pin-fill-scale': 1,
                duration: .2
            }],
            onComplete() {
                classList.add('active')
                classList.remove('animating')
            }
        })
    })
})

              
            
!
999px

Console