CodePen Embed - Star Toggle

Live

Live

Live

This Pen is owned by Aaron Iker on CodePen.

See more by @aaroniker on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js

{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; web-share; vr","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":null,"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}]},"url":"https://codepen.io/graphql","api":"cprails","cpedata":{"action":"show","controller":"embed"}},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":4,\"theme\":\"twilight\",\"id\":\"ExKgrmO\",\"auto_save\":true},\"hashid\":\"ExKgrmO\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js\",\"order\":0,\"resource_type\":\"js\",\"par_content\":\"\"}],\"tags\":[],\"id\":46568239,\"user_id\":165585,\"html\":\"<label class=\\\"star-toggle\\\">\\n    <input type=\\\"checkbox\\\" />\\n    <div class=\\\"icon\\\">\\n        <div class=\\\"star\\\">\\n            <div class=\\\"eye\\\"></div>\\n        </div>\\n    </div>\\n</label>\\n\\n<label class=\\\"star-toggle\\\">\\n    <input type=\\\"checkbox\\\" checked />\\n    <div class=\\\"icon\\\">\\n        <div class=\\\"star\\\">\\n            <div class=\\\"eye\\\"></div>\\n        </div>\\n    </div>\\n</label>\\n\\n\\n<a class=\\\"dribbble\\\" href=\\\"https://dribbble.com/ai\\\" target=\\\"_blank\\\"><img src=\\\"https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg\\\" alt=\\\"\\\"></a>\\n<a class=\\\"twitter\\\" target=\\\"_blank\\\" 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\":\".star-toggle {\\n    --color-default: #7E7E86;\\n    --face-color-default: #1A1A20;\\n    --color-active: #F6C206;\\n    --face-color-active: #845901;\\n    --hole: #09090C;\\n    --hole-inner: #121218;\\n    --y: 0px;\\n    --scale: 1;\\n    --rotate: 0deg;\\n    --hole-scale: 0;\\n    --face-scale: 1;\\n    --face-tear-o: 0;\\n    --face-tear-y: -6px;\\n    --face-tear-s: 1;\\n    --toggle-y: 0px;\\n    width: 40px;\\n    height: 40px;\\n    display: block;\\n    cursor: pointer;\\n    transform: translateY(var(--toggle-y)) translateZ(0);\\n    &:active {\\n        --icon-s: .95;\\n    }\\n    input {\\n        display: none;\\n        &:checked {\\n            & + .icon {\\n                --color: var(--color-active);\\n                --face-color: var(--face-color-active);\\n                --face-radius: 0 0 4px 4px;\\n            }\\n        }\\n    }\\n    .icon {\\n        width: 64px;\\n        height: 140px;\\n        display: flex;\\n        pointer-events: none;\\n        position: relative;\\n        clip-path: ellipse(150% 50% at 50% 50%);\\n        margin: -100px 0 0 -12px;\\n        transform: scale(var(--icon-s, 1)) translateZ(0);\\n        transform-origin: 50% 108px;\\n        transition: transform .1s;\\n        &:before {\\n            content: '';\\n            margin-top: auto;\\n            display: block;\\n            width: 64px;\\n            height: 20px;\\n            background: var(--hole);\\n            box-shadow: inset 0 6px 0 0 var(--hole-inner);\\n            border-radius: 100px / 30px;\\n            transform: scale(var(--hole-scale));\\n            transform-origin: 50% 100%;\\n        }\\n        .star {\\n            width: 40px;\\n            height: 40px;\\n            position: absolute;\\n            left: 12px;\\n            bottom: 0;\\n            transform: translateY(var(--y)) rotate(var(--rotate)) scale(var(--scale));\\n            border-radius: var(--radius, 0px);\\n            background: var(--color, var(--color-default));\\n            clip-path: var(--clip, polygon(50% 0, 65% 32%, 100% 37%, 75% 63%, 80% 100%, 50% 79%, 20% 100%, 25% 63%, 0% 37%, 35% 32%));\\n            transition: clip-path .2s, border-radius .2s, background .2s;\\n            &:before,\\n            &:after,\\n            .eye {\\n                content: '';\\n                position: absolute;\\n                background: var(--face-color, var(--face-color-default));\\n                transition: background .2s, box-shadow .2s;\\n            }\\n            &:before,\\n            .eye {\\n                width: 4px;\\n                height: 4px;\\n                border-radius: 50%;\\n                left: 21px;\\n                top: 16px;\\n            }\\n            &:after {\\n                width: 10px;\\n                height: 4px;\\n                border-radius: var(--face-radius, 4px 4px 0 0);\\n                left: 15px;\\n                top: 23px;\\n                transition: border-radius .2s;\\n            }\\n            .eye {\\n                left: 15px;\\n                transform: scaleY(var(--face-scale));\\n                &:before {\\n                    content: '';\\n                    position: absolute;\\n                    left: -1px;\\n                    top: 5px;\\n                    width: 2px;\\n                    height: 2px;\\n                    border-radius: 50%;\\n                    background: var(--face-color-default);\\n                    opacity: var(--face-tear-o);\\n                    transform: translateY(var(--face-tear-y)) scaleY(var(--face-tear-s));\\n                }\\n            }\\n        }\\n    }\\n    &.star-bottom {\\n        --clip: polygon(50% 0, 65% 32%, 100% 37%, 75% 63%, 83% 96%, 50% 79%, 17% 96%, 25% 63%, 0% 37%, 35% 32%);\\n    }\\n    &.star-round {\\n        --clip: polygon(50% 0%, 100% 0%, 100% 37%, 100% 63%, 100% 100%, 50% 100%, 0% 100%, 0% 63%, 0% 37%, 0% 0%);\\n        --radius: 50%;\\n    }\\n}\\n\\nhtml {\\n    box-sizing: border-box;\\n    -webkit-font-smoothing: antialiased;\\n}\\n\\n* {\\n    box-sizing: inherit;\\n    &:before,\\n    &:after {\\n        box-sizing: inherit;\\n    }\\n}\\n\\n// Center & dribbble\\nbody {\\n    min-height: 100vh;\\n    display: flex;\\n    font-family: 'Inter', Arial;\\n    justify-content: center;\\n    align-items: center;\\n    background: #1A1A20;\\n    .star-toggle {\\n        margin: 0 20px;\\n    }\\n    .dribbble {\\n        position: fixed;\\n        display: block;\\n        right: 20px;\\n        bottom: 20px;\\n        img {\\n            display: block;\\n            height: 28px;\\n        }\\n    }\\n    .twitter {\\n        position: fixed;\\n        display: block;\\n        right: 64px;\\n        bottom: 14px;\\n        svg {\\n            width: 32px;\\n            height: 32px;\\n            fill: #1da1f2;\\n        }\\n    }\\n}\",\"js\":\"document.querySelectorAll('.star-toggle').forEach(toggle => {\\n\\n    let input = toggle.querySelector('input')\\n\\n    toggle.addEventListener('click', e => {\\n        e.preventDefault()\\n\\n        if(toggle.classList.contains('animated')) {\\n            return\\n        }\\n        toggle.classList.add('animated')\\n\\n        gsap.to(toggle, {\\n            keyframes: [{\\n                '--y': '-48px',\\n                duration: .3,\\n                ease: 'power2.out'\\n            }, {\\n                '--y': '68px',\\n                '--scale': .4,\\n                duration: .325,\\n                onStart() {\\n                    toggle.classList.add('star-round')\\n                }\\n            }, {\\n                '--y': '-80px',\\n                '--scale': 1,\\n                duration: .45,\\n                ease: 'power2.out',\\n                onStart() {\\n                    input.checked = !input.checked\\n                    setTimeout(() => toggle.classList.remove('star-round'), 100)\\n                }\\n            }, {\\n                '--y': '0px',\\n                duration: .45,\\n                ease: 'power2.in',\\n                onComplete() {\\n                    toggle.classList.add('star-bottom')\\n                    setTimeout(() => toggle.classList.remove('star-bottom'), 200)\\n                }\\n            }, {\\n                '--toggle-y': '3px',\\n                duration: .2\\n            }, {\\n                '--toggle-y': '0px',\\n                '--face-scale': input.checked ? 1 : .4,\\n                '--face-tear-o': input.checked ? 1 : 0,\\n                '--face-tear-y': input.checked ? '0px' : 0,\\n                '--face-tear-s': input.checked ? 1.5 : 1,\\n                duration: .125\\n            }, {\\n                '--face-scale': 1,\\n                '--face-tear-o': 0,\\n                '--face-tear-y': input.checked ? '4px' : 0,\\n                '--face-tear-s': input.checked ? 2.5 : 1,\\n                duration: .15\\n            }],\\n            clearProps: true,\\n            onComplete() {\\n                toggle.classList.remove('animated')\\n            }\\n        })\\n\\n        gsap.to(toggle, {\\n            keyframes: [{\\n                '--hole-scale': .8,\\n                duration: .5,\\n                ease: 'elastic.out(1, .75)'\\n            }, {\\n                '--hole-scale': 0,\\n                duration: .2,\\n                delay: .2\\n            }]\\n        })\\n\\n        gsap.to(toggle, {\\n            '--rotate': '360deg',\\n            duration: 1.55,\\n            clearProps: true\\n        })\\n    })\\n})\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"reset\",\"js_library\":null,\"created_at\":\"2020-08-20T07:40:19.000Z\",\"updated_at\":\"2020-08-20T07:40:43.000Z\",\"title\":\"Star Toggle\",\"description\":\"\",\"slug_hash\":\"ExKgrmO\",\"head\":\"\",\"private\":false,\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"autoprefixer\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":\"2022-11-08T22:42:55.128Z\",\"pen_hash\":null}","__jwt":"eyJhbGciOiJIUzI1NiJ9.eyJjbGFpbXMiOnsidXNlcl9pZCI6MX0sImV4cCI6MTY3NTY0OTUzM30.SYMKt9J_TrGj4QkCUwoah38mj6fR3ENuraNOQsiM7KI","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6bce046e7128ddf9391ccf7acbecbf7ce0cbd7b6defbeb2e217a867f51485d25.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-550eae0ce567d3d9182e33cee4e187761056020161aa87e3ef74dc467972c555.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"}