{"__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; vr; web-share","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":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails","cpedata":{"action":"show","controller":"live_fullpage"}},"__user":{"anon":true,"base_url":"/anon/","current_team_id":0,"current_team_hashid":null,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjg1NzE1NTc0LCJpYXQiOjE2ODU3MTE5NzQsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.pnVMbT6iF-c4cFTGF9a1W0aEAHHH0QloC0NV9Wrog7f9TI9eCfwlA_2yXvJOahKqYF4ka7z5xTTN-gLOgFquJbzcu0Owhl3xFfz_W_6WUTvKor5KtpfK6CpTTqk4Q5QPiWyr9V7gdivMwR0zQTF2FYxA29DS-3h9ubg_LhOgrv6XSDbwt7gwQmr_G1uoC04UTnM1FwpFYDCYgyyvJoEcSTCei-wxv4J_35ILB7xuW_854YSpndSiCfhPCKLqHj6mczho4_T_bxR6ZZDQhnAgBviNX170kVRH3k3_aoCWey-IRBVl4uw05qrsMIgWc0EtsrWxjjibm04qM7_esKdcsg"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":48459221,\"user_id\":3685267,\"html\":\"<div id=\\\"root\\\"><\\/div>\",\"css\":\"\\n.w-100{\\n width: 100px;\\n}\\n.w-300{\\n width: 300px;\\n}\\n.w-400{\\n width: 400px;\\n}\\n.h-100{\\n height: 100px;\\n}\",\"js\":\"const { useState } = React\\nconst { useSpring, animated} = ReactSpring;\\n\\nconst social = ['share', 'twitter', 'facebook', 'instagram'];\\nfunction App() {\\n const [step, setStep] = useState({\\n index: 0,\\n widthStart: 400,\\n widthEnd: 400,\\n leftStart: 0,\\n leftEnd: 0,\\n });\\n\\n const onCoverClick = () => {\\n const { index } = step;\\n const nextStep = (index + 1) % 3;\\n if (index === 0) {\\n setStep({\\n index: nextStep,\\n widthStart: 400,\\n widthEnd: 100,\\n leftStart: 0,\\n leftEnd: 0,\\n });\\n }\\n if (index === 2) {\\n setStep({\\n index: nextStep,\\n widthStart: 100,\\n widthEnd: 400,\\n leftStart: step.leftEnd,\\n leftEnd: 0,\\n });\\n }\\n };\\n\\n const onSocialIconClick = (i) => {\\n const { index } = step;\\n if (index === 1) {\\n setStep({\\n index: 2,\\n widthStart: 400,\\n widthEnd: 100,\\n leftStart: 0,\\n leftEnd: i * 100,\\n });\\n }\\n };\\n\\n const spring = useSpring({\\n width: step.widthEnd,\\n left: step.leftEnd,\\n from: { width: step.widthStart, left: step.leftStart },\\n });\\n return (\\n <div className=\\\"flex justify-center items-center h-screen overflow-hidden\\\">\\n <div className=\\\"w-400 h-100 bg-gray-200 relative rounded-full\\\">\\n <animated.div\\n style={spring}\\n className=\\\"w-400 h-100 absolute bg-gray-800 text-gray-200 rounded-full top-0 left-0 overflow-hidden flex cursor-pointer\\\"\\n onClick={onCoverClick}\\n >\\n <div className=\\\"w-100 flex justify-center items-center flex-shrink-0\\\">\\n <Icon name={['share', 'more', 'tick'][step.index]} \\/>\\n <\\/div>\\n <div className=\\\"w-300 text-3xl font-bold flex justify-center items-center flex-shrink-0\\\">\\n Share\\n <\\/div>\\n <\\/animated.div>\\n <div className=\\\"flex text-gray-800\\\">\\n {social.map((name, index) => (\\n <div\\n className={`w-100 h-100 flex justify-center items-center cursor-pointer ${\\n index ? '' : 'text-gray-400'\\n }`}\\n onClick={() => {\\n if (index) {\\n onSocialIconClick(index);\\n }\\n }}\\n >\\n <Icon name={name} \\/>\\n <\\/div>\\n ))}\\n <\\/div>\\n <\\/div>\\n <\\/div>\\n );\\n}\\n\\nfunction Icon({ name }) {\\n const icons = {\\n twitter: (\\n <svg\\n xmlns=\\\"http:\\/\\/www.w3.org\\/2000\\/svg\\\"\\n className=\\\"w-12\\\"\\n stroke=\\\"none\\\"\\n fill=\\\"currentColor\\\"\\n viewBox=\\\"0 0 512 512\\\"\\n >\\n <path d=\\\"M512 97.248c-19.04 8.352-39.328 13.888-60.48 16.576 21.76-12.992 38.368-33.408 46.176-58.016-20.288 12.096-42.688 20.64-66.56 25.408C411.872 60.704 384.416 48 354.464 48c-58.112 0-104.896 47.168-104.896 104.992 0 8.32.704 16.32 2.432 23.936-87.264-4.256-164.48-46.08-216.352-109.792-9.056 15.712-14.368 33.696-14.368 53.056 0 36.352 18.72 68.576 46.624 87.232-16.864-.32-33.408-5.216-47.424-12.928v1.152c0 51.008 36.384 93.376 84.096 103.136-8.544 2.336-17.856 3.456-27.52 3.456-6.72 0-13.504-.384-19.872-1.792 13.6 41.568 52.192 72.128 98.08 73.12-35.712 27.936-81.056 44.768-130.144 44.768-8.608 0-16.864-.384-25.12-1.44C46.496 446.88 101.6 464 161.024 464c193.152 0 298.752-160 298.752-298.688 0-4.64-.16-9.12-.384-13.568 20.832-14.784 38.336-33.248 52.608-54.496z\\\" \\/>\\n <\\/svg>\\n ),\\n facebook: (\\n <svg\\n xmlns=\\\"http:\\/\\/www.w3.org\\/2000\\/svg\\\"\\n className=\\\"w-12\\\"\\n stroke=\\\"none\\\"\\n fill=\\\"currentColor\\\"\\n viewBox=\\\"0 0 512 512\\\"\\n >\\n <path d=\\\"M288 176v-64c0-17.664 14.336-32 32-32h32V0h-64c-53.024 0-96 42.976-96 96v80h-64v80h64v256h96V256h64l32-80h-96z\\\" \\/>\\n <\\/svg>\\n ),\\n instagram: (\\n <svg\\n xmlns=\\\"http:\\/\\/www.w3.org\\/2000\\/svg\\\"\\n className=\\\"w-12\\\"\\n stroke=\\\"none\\\"\\n fill=\\\"currentColor\\\"\\n viewBox=\\\"0 0 512 512\\\"\\n >\\n <path d=\\\"M352 0H160C71.648 0 0 71.648 0 160v192c0 88.352 71.648 160 160 160h192c88.352 0 160-71.648 160-160V160C512 71.648 440.352 0 352 0zm112 352c0 61.76-50.24 112-112 112H160c-61.76 0-112-50.24-112-112V160C48 98.24 98.24 48 160 48h192c61.76 0 112 50.24 112 112v192z\\\" \\/>\\n <path d=\\\"M256 128c-70.688 0-128 57.312-128 128s57.312 128 128 128 128-57.312 128-128-57.312-128-128-128zm0 208c-44.096 0-80-35.904-80-80 0-44.128 35.904-80 80-80s80 35.872 80 80c0 44.096-35.904 80-80 80z\\\" \\/>\\n <circle cx=\\\"393.6\\\" cy=\\\"118.4\\\" r=\\\"17.056\\\" \\/>\\n <\\/svg>\\n ),\\n share: (\\n <svg\\n className=\\\"w-12\\\"\\n stroke=\\\"none\\\"\\n fill=\\\"currentColor\\\"\\n viewBox=\\\"-21 0 512 512\\\"\\n xmlns=\\\"http:\\/\\/www.w3.org\\/2000\\/svg\\\"\\n >\\n <path d=\\\"M453.332 85.332c0 38.293-31.039 69.336-69.332 69.336s-69.332-31.043-69.332-69.336C314.668 47.043 345.707 16 384 16s69.332 31.043 69.332 69.332zm0 0\\\" \\/>\\n <path d=\\\"M384 170.668c-47.063 0-85.332-38.273-85.332-85.336C298.668 38.273 336.938 0 384 0s85.332 38.273 85.332 85.332c0 47.063-38.27 85.336-85.332 85.336zM384 32c-29.418 0-53.332 23.938-53.332 53.332 0 29.398 23.914 53.336 53.332 53.336s53.332-23.938 53.332-53.336C437.332 55.938 413.418 32 384 32zm0 0M453.332 426.668C453.332 464.957 422.293 496 384 496s-69.332-31.043-69.332-69.332c0-38.293 31.039-69.336 69.332-69.336s69.332 31.043 69.332 69.336zm0 0\\\" \\/>\\n <path d=\\\"M384 512c-47.063 0-85.332-38.273-85.332-85.332 0-47.063 38.27-85.336 85.332-85.336s85.332 38.273 85.332 85.336c0 47.059-38.27 85.332-85.332 85.332zm0-138.668c-29.418 0-53.332 23.938-53.332 53.336C330.668 456.063 354.582 480 384 480s53.332-23.938 53.332-53.332c0-29.398-23.914-53.336-53.332-53.336zm0 0M154.668 256c0 38.293-31.043 69.332-69.336 69.332C47.043 325.332 16 294.293 16 256s31.043-69.332 69.332-69.332c38.293 0 69.336 31.039 69.336 69.332zm0 0\\\" \\/>\\n <path d=\\\"M85.332 341.332C38.273 341.332 0 303.062 0 256s38.273-85.332 85.332-85.332c47.063 0 85.336 38.27 85.336 85.332s-38.273 85.332-85.336 85.332zm0-138.664C55.914 202.668 32 226.602 32 256s23.914 53.332 53.332 53.332c29.422 0 53.336-23.934 53.336-53.332s-23.914-53.332-53.336-53.332zm0 0\\\" \\/>\\n <path d=\\\"M135.703 245.762c-7.426 0-14.637-3.864-18.562-10.774-5.825-10.218-2.239-23.254 7.98-29.101l197.95-112.852c10.218-5.867 23.253-2.281 29.1 7.977 5.825 10.218 2.24 23.254-7.98 29.101L146.238 242.965a21.195 21.195 0 01-10.535 2.797zm0 0M333.633 421.762c-3.586 0-7.211-.899-10.54-2.797L125.142 306.113c-10.22-5.824-13.801-18.86-7.977-29.101 5.8-10.239 18.856-13.844 29.098-7.977l197.953 112.852c10.219 5.824 13.8 18.86 7.976 29.101-3.945 6.91-11.156 10.774-18.558 10.774zm0 0\\\" \\/>\\n <\\/svg>\\n ),\\n tick: (\\n <svg\\n className=\\\"w-12\\\"\\n stroke=\\\"none\\\"\\n fill=\\\"currentColor\\\"\\n viewBox=\\\"0 -46 417.813 417\\\"\\n xmlns=\\\"http:\\/\\/www.w3.org\\/2000\\/svg\\\"\\n >\\n <path d=\\\"M159.988 318.582c-3.988 4.012-9.43 6.25-15.082 6.25s-11.094-2.238-15.082-6.25L9.375 198.113c-12.5-12.5-12.5-32.77 0-45.246l15.082-15.086c12.504-12.5 32.75-12.5 45.25 0l75.2 75.203L348.104 9.781c12.504-12.5 32.77-12.5 45.25 0l15.082 15.086c12.5 12.5 12.5 32.766 0 45.246zm0 0\\\" \\/>\\n <\\/svg>\\n ),\\n more: (\\n <svg\\n className=\\\"w-12\\\"\\n stroke=\\\"none\\\"\\n fill=\\\"currentColor\\\"\\n viewBox=\\\"0 -192 512 512\\\"\\n xmlns=\\\"http:\\/\\/www.w3.org\\/2000\\/svg\\\"\\n >\\n <path d=\\\"M320 64c0 35.348-28.652 64-64 64s-64-28.652-64-64 28.652-64 64-64 64 28.652 64 64zm0 0M128 64c0 35.348-28.652 64-64 64S0 99.348 0 64 28.652 0 64 0s64 28.652 64 64zm0 0M512 64c0 35.348-28.652 64-64 64s-64-28.652-64-64 28.652-64 64-64 64 28.652 64 64zm0 0\\\" \\/>\\n <\\/svg>\\n ),\\n };\\n\\n return icons[name] || null;\\n}\\n\\n\\nReactDOM.render(<App \\/>,\\ndocument.getElementById(\\\"root\\\"))\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"babel\",\"html_classes\":\"\",\"css_starter\":\"normalize\",\"js_library\":null,\"created_at\":\"2020-11-16T15:00:00.000Z\",\"updated_at\":\"2020-11-16T15:38:01.000Z\",\"title\":\"Social Share Button | React Spring\",\"description\":\"Animated social share button using react-spring. Styled with tailwindcss\\n\\nInspired by [Social Share Button](https:\\/\\/dribbble.com\\/shots\\/14306315-Social-Share-Button) from [Andjela Pantic](https:\\/\\/dribbble.com\\/andjelap)\\n\\nIcons from [flaticon](https:\\/\\/www.flaticon.com)\\n\",\"slug_hash\":\"PozLKVG\",\"head\":\"\",\"private\":false,\"slug_hash_private\":\"1eec196384967ed6ff5abea67e2426d2\",\"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\":null,\"cpid\":\"0175d191-e180-705b-bcf3-60045c46b7f5\",\"is_new_editor_pen\":false,\"pen_hash\":null,\"hashid\":\"PozLKVG\"}"}