CodePen Embed - Recreating "Motion Study" by Mauricio Vio

Live

Live

Live

This Pen is owned by Jacob Foster on CodePen.

See more by @Alca on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js

{"__browser":{"country":"US","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":null,"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}]},"url":"https://codepen.io/graphql","api":"cprails"},"__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\":\"tabs\",\"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\":\"VByeJd\",\"auto_save\":true},\"hashid\":\"VByeJd\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js\",\"order\":0,\"resource_type\":\"js\",\"par_content\":\"\"}],\"tags\":[],\"id\":26707680,\"user_id\":64018,\"html\":\"//- https://dribbble.com/shots/3888265-Motion-Study\\n\\n-\\n\\tvar images = [ // Images by various people from Unsplash\\n\\t\\t\\t{\\n\\t\\t\\t\\tname: 'Benjamin Hung',\\n\\t\\t\\t\\tloc: 'Shibuya, Japan',\\n\\t\\t\\t\\tsrc: 'EYmhcdGuYmI',\\n\\t\\t\\t\\turl: 'ef5af971-fc46-4ee1-a589-980346478696_opt.png'\\n\\t\\t\\t}, {\\n\\t\\t\\t\\tname: 'Ryan Tang',\\n\\t\\t\\t\\tloc: 'Mong Kok, Hong Kong',\\n\\t\\t\\t\\tsrc: 'ANJHXftvvJ8',\\n\\t\\t\\t\\turl: '522d6a86-0dcf-4554-8b22-7655d65a1f66_opt.png'\\n\\t\\t\\t}, {\\n\\t\\t\\t\\tname: 'Steve Roe',\\n\\t\\t\\t\\tloc: 'Incheon, South Korea',\\n\\t\\t\\t\\tsrc: '73aocAAt7rs',\\n\\t\\t\\t\\turl: '9b5f71cb-34a3-4fb4-a3a6-0ce9557c0acd_opt.png'\\n\\t\\t\\t}, {\\n\\t\\t\\t\\tname: 'Sean Foley',\\n\\t\\t\\t\\tloc: 'Wan Chai, Hong Kong',\\n\\t\\t\\t\\tsrc: 'aPDCEoW7B78',\\n\\t\\t\\t\\turl: '10cfd52d-e217-41e9-bb8b-ad43384a5e63_opt.png'\\n\\t\\t\\t}, {\\n\\t\\t\\t\\tname: 'Alex Knight',\\n\\t\\t\\t\\tloc: 'Shibuya-ku, Japan',\\n\\t\\t\\t\\tsrc: 'Akz00I_GGjU',\\n\\t\\t\\t\\turl: 'b9669f2a-17fc-47dc-b6b5-3f863004efa8_opt.png'\\n\\t\\t\\t}, {\\n\\t\\t\\t\\tname: 'Benjamin Hung',\\n\\t\\t\\t\\tloc: 'Tokyo, Japan',\\n\\t\\t\\t\\tsrc: 'pTn26knnKVw',\\n\\t\\t\\t\\turl: '31979576-5060-4513-aae2-b379b87e7fe6_opt.png'\\n\\t\\t\\t}, {\\n\\t\\t\\t\\tname: 'Jesus In Taiwan',\\n\\t\\t\\t\\tloc: 'Taipei City, Taiwan',\\n\\t\\t\\t\\tsrc: 'v63B_MUiFw8',\\n\\t\\t\\t\\turl: '429b83b8-1ad4-4450-b0de-0a0c1073cf1e_opt.jpg'\\n\\t\\t\\t}\\n\\t\\t];\\n\\n#hero-slides\\n\\t#header\\n\\t\\t#logo\\n\\t\\t#menu\\n\\t\\t\\t#hamburger\\n\\t\\t\\t\\t-for(var i = 0; i < 3; i++)\\n\\t\\t\\t\\t\\t.slice\\n\\t#slides-cont\\n\\t\\t.button#next\\n\\t\\t.button#prev\\n\\t\\t#slides\\n\\t\\t\\t-for(var i = 0; i < 7; i++)\\n\\t\\t\\t\\t- var img = images[i % images.length]\\n\\t\\t\\t\\t.slide(style=`background-image: url(https://alca.tv/static/u/${img.url})`)\\n\\t\\t\\t\\t\\t.number=('0' + (i + 1)).slice(-2)\\n\\t\\t\\t\\t\\t.body\\n\\t\\t\\t\\t\\t\\t.location=img.loc\\n\\t\\t\\t\\t\\t\\t.headline=`Photo by ${img.name}`\\n\\t\\t\\t\\t\\t\\ta(href=`https://unsplash.com/photos/${img.src}` target=\\\"_blank\\\")\\n\\t\\t\\t\\t\\t\\t\\t.link View on Unsplash\\n\\t\\t#next-catch\\n\\t\\t#prev-catch\\n\\t#footer\\n\\t\\t//- #page-counter\\n\\t\\ta(href=\\\"https://dribbble.com/shots/3888265-Motion-Study\\\" target=\\\"_blank\\\")\\n\\t\\t\\t#dribbble\",\"css\":\"@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,400,900,800i');\\n\\n$accent-color: hsl(204, 90%, 50%);\\n$curve: cubic-bezier(0.7, 0, 0.3, 1);\\n\\nbody {\\n\\t--slides-per-page: 2;\\n\\tmargin: 0;\\n\\toverflow: hidden;\\n\\theight: 100vh;\\n\\tfont-family: 'Roboto Condensed', sans-serif;\\n\\tcolor: hsl(0, 0%, 100%);\\n}\\n\\na {\\n\\ttext-decoration: none;\\n\\tcolor: inherit;\\n}\\n\\n#hero-slides {\\n\\t--page: 0;\\n\\theight: 100vh;\\n\\tbackground: hsl(210, 23%, 19%);\\n\\tbackground: linear-gradient(90deg, hsl(210, 13%, 28%) 0%, hsl(210, 23%, 19%) 100%);\\n\\t\\n\\t#header {\\n\\t\\theight: 12vh;\\n\\t\\tline-height: 12vh;\\n\\t\\tpadding: 0 3vw;\\n\\t\\tposition: relative;\\n\\t\\t\\n\\t\\t#logo {\\n\\t\\t\\tfont-size: 2.5vh;\\n\\t\\t\\tfont-style: italic;\\n\\t\\t\\t\\n\\t\\t\\t&:before {\\n\\t\\t\\t\\tcontent: 'The';\\n\\t\\t\\t\\ttext-transform: uppercase;\\n\\t\\t\\t\\tfont-weight: 100;\\n\\t\\t\\t\\tmargin-right: 0.4em;\\n\\t\\t\\t}\\n\\t\\t\\t&:after {\\n\\t\\t\\t\\tcontent: 'Wall';\\n\\t\\t\\t\\ttext-transform: uppercase;\\n\\t\\t\\t\\tfont-weight: 800;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t#menu {\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 0;\\n\\t\\t\\tright: 0;\\n\\t\\t\\tbottom: 0;\\n\\t\\t\\tcursor: pointer;\\n\\t\\t\\tpadding: 0 3vw;\\n\\t\\t\\t\\n\\t\\t\\t&:before {\\n\\t\\t\\t\\tfont-size: 1.75vh;\\n\\t\\t\\t\\tcontent: 'Play Demo';\\n\\t\\t\\t\\tmargin-right: 0.5em;\\n\\t\\t\\t\\ttext-transform: uppercase;\\n\\t\\t\\t}\\n\\t\\t\\t#hamburger {\\n\\t\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\t\\t\\n\\t\\t\\t\\t.slice {\\n\\t\\t\\t\\t\\tbackground: hsl(0, 0%, 100%);\\n\\t\\t\\t\\t\\theight: 0.2vh;\\n\\t\\t\\t\\t\\twidth: 1vw;\\n\\t\\t\\t\\t\\t\\n\\t\\t\\t\\t\\t&:not(:last-child) {\\n\\t\\t\\t\\t\\t\\tmargin-bottom: 0.5vh;\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\t\\t}\\n\\t}\\n\\t#slides-cont {\\n\\t\\tposition: relative;\\n\\t\\t// overflow: hidden;\\n\\t\\t--button-height: 6vh;\\n\\t\\t--button-spacing: 0.2vh;\\n\\t\\t\\n\\t\\t.button {\\n\\t\\t\\twidth: 5vw;\\n\\t\\t\\theight: var(--button-height);\\n\\t\\t\\tbackground: $accent-color;\\n\\t\\t\\t// text-align: center;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\tright: 5.375vw;\\n\\t\\t\\ttop: 38vh;\\n\\t\\t\\tz-index: 100;\\n\\t\\t\\tcursor: pointer;\\n\\t\\t\\t\\n\\t\\t\\t&:before,\\n\\t\\t\\t&:after {\\n\\t\\t\\t\\tline-height: var(--button-height);\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\tmargin-left: -0.25vw;\\n\\t\\t\\t\\tpointer-events: none;\\n\\t\\t\\t\\ttransform: scale(0.75, 1.5);\\n\\t\\t\\t\\ttransition: 125ms ease-in-out;\\n\\t\\t\\t}\\n\\t\\t\\t&:before {\\n\\t\\t\\t\\tleft: 50%;\\n\\t\\t\\t}\\n\\t\\t\\t&:after {\\n\\t\\t\\t\\topacity: 0;\\n\\t\\t\\t}\\n\\t\\t\\t&:hover {\\n\\t\\t\\t\\t&:before,\\n\\t\\t\\t\\t&:after {\\n\\t\\t\\t\\t\\ttransition: 250ms ease-in-out;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\t&:before {\\n\\t\\t\\t\\t\\topacity: 0;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\t&:after {\\n\\t\\t\\t\\t\\tleft: 50% !important;\\n\\t\\t\\t\\t\\topacity: 1;\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t#next {\\n\\t\\t\\tmargin-top: calc(-1 * (var(--button-height) + var(--button-spacing)));\\n\\t\\t\\t\\n\\t\\t\\t&:before,\\n\\t\\t\\t&:after {\\n\\t\\t\\t\\tcontent: '>';\\n\\t\\t\\t}\\n\\t\\t\\t&:after {\\n\\t\\t\\t\\tleft: 30%;\\n\\t\\t\\t}\\n\\t\\t\\t&:hover:before {\\n\\t\\t\\t\\tleft: 70%;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t#prev {\\n\\t\\t\\tmargin-top: var(--button-spacing);\\n\\t\\t\\topacity: calc(var(--page) + 0.5);\\n\\t\\t\\ttransition: 500ms opacity;\\n\\t\\t\\t\\n\\t\\t\\t&:before,\\n\\t\\t\\t&:after {\\n\\t\\t\\t\\tcontent: '<';\\n\\t\\t\\t}\\n\\t\\t\\t&:after {\\n\\t\\t\\t\\tleft: 70%;\\n\\t\\t\\t}\\n\\t\\t\\t&:hover:before {\\n\\t\\t\\t\\tleft: 30%;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t#next-catch,\\n\\t\\t#prev-catch {\\n\\t\\t\\twidth: 10vw;\\n\\t\\t\\theight: 76vh;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 0;\\n\\t\\t\\tz-index: 90;\\n\\t\\t}\\n\\t\\t#next-catch {\\n\\t\\t\\tright: 0;\\n\\t\\t}\\n\\t\\t#prev-catch {\\n\\t\\t\\tleft: 0;\\n\\t\\t}\\n\\t}\\n\\t#slides {\\n\\t\\t--slides-height: 76vh;\\n\\t\\twidth: auto;\\n\\t\\theight: var(--slides-height);\\n\\t\\tpadding: 0 10vw;\\n\\t\\tfont-size: 0;\\n\\t\\twhite-space: nowrap;\\n\\t\\tposition: absolute;\\n\\t\\ttransform: translate3D(calc(var(--page) * -80vw), 0, 0);\\n\\t\\ttransition: 1500ms transform $curve;\\n\\t\\t\\n\\t\\t.slide {\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\tvertical-align: top;\\n\\t\\t\\tfont-size: 1.5vw;\\n\\t\\t\\twidth: 24em;\\n\\t\\t\\theight: var(--slides-height);\\n\\t\\t\\tmargin: 0 1.333em;\\n\\t\\t\\tbackground: hsl(210, 23%, 8%);\\n\\t\\t\\tcolor: white;\\n\\t\\t\\tbackground-size: cover;\\n\\t\\t\\tbackground-position: center;\\n\\t\\t\\twhite-space: normal;\\n\\t\\t\\tword-break: break-word;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\t\\n\\t\\t\\t&:before {\\n\\t\\t\\t\\tcontent: '';\\n\\t\\t\\t\\tdisplay: block;\\n\\t\\t\\t\\tbackground: linear-gradient(180deg, hsla(209, 11%, 38%, 0) 0%, hsla(209, 36%, 20%, 0.7) 100%);\\n\\t\\t\\t\\topacity: 0;\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\ttop: 0;\\n\\t\\t\\t\\tleft: 0;\\n\\t\\t\\t\\tright: 0;\\n\\t\\t\\t\\tbottom: 0;\\n\\t\\t\\t}\\n\\t\\t\\t.number {\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\ttop: 2em;\\n\\t\\t\\t\\tleft: 2em;\\n\\t\\t\\t\\tfilter: drop-shadow(0 2px 1px hsla(0, 0%, 0%, 0.5));\\n\\t\\t\\t\\t\\n\\t\\t\\t\\t&,\\n\\t\\t\\t\\t&:before,\\n\\t\\t\\t\\t&:after {\\n\\t\\t\\t\\t\\tvertical-align: middle;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\t&:before,\\n\\t\\t\\t\\t&:after {\\n\\t\\t\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\t\\t\\tcontent: '';\\n\\t\\t\\t\\t\\theight: 0.133em;\\n\\t\\t\\t\\t\\tmargin-top: -0.2em;\\n\\t\\t\\t\\t\\tbackground: hsl(0, 0%, 100%);\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\t&:before {\\n\\t\\t\\t\\t\\twidth: 0;\\n\\t\\t\\t\\t\\tmargin-left: 0;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\t&:after {\\n\\t\\t\\t\\t\\twidth: 3em;\\n\\t\\t\\t\\t\\tmargin-left: 1em;\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\t\\t\\t.body {\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\tbottom: 2em;\\n\\t\\t\\t\\tleft: 2em;\\n\\t\\t\\t\\tright: 2em;\\n\\t\\t\\t}\\n\\t\\t\\t.location,\\n\\t\\t\\t.headline {\\n\\t\\t\\t\\tposition: relative;\\n\\t\\t\\t\\tbottom: 0;\\n\\t\\t\\t\\tcursor: default;\\n\\t\\t\\t}\\n\\t\\t\\t&:before,\\n\\t\\t\\t.number:before,\\n\\t\\t\\t.number:after,\\n\\t\\t\\t.location,\\n\\t\\t\\t.headline,\\n\\t\\t\\t.link {\\n\\t\\t\\t\\ttransition: 375ms $curve;\\n\\t\\t\\t}\\n\\t\\t\\t.location {\\n\\t\\t\\t\\tfont-weight: 100;\\n\\t\\t\\t\\tmargin-bottom: 1.5em;\\n\\t\\t\\t\\ttransition-delay: 60ms;\\n\\t\\t\\t}\\n\\t\\t\\t.headline {\\n\\t\\t\\t\\tfont-size: 2.667em;\\n\\t\\t\\t\\tfont-weight: 900;\\n\\t\\t\\t\\ttransition-delay: 50ms;\\n\\t\\t\\t}\\n\\t\\t\\t.link {\\n\\t\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\t\\tbackground: $accent-color;\\n\\t\\t\\t\\tpadding: 0.5em 1.25em;\\n\\t\\t\\t\\tfont-size: 1.33em;\\n\\t\\t\\t\\topacity: 0;\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\tbottom: -2em;\\n\\t\\t\\t\\tpointer-events: none;\\n\\t\\t\\t\\ttransition-delay: 25ms;\\n\\t\\t\\t}\\n\\t\\t\\t&.hover,\\n\\t\\t\\t&:hover {\\n\\t\\t\\t\\t&:before {\\n\\t\\t\\t\\t\\topacity: 1;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\t&:before,\\n\\t\\t\\t\\t.number:before,\\n\\t\\t\\t\\t.number:after,\\n\\t\\t\\t\\t.location,\\n\\t\\t\\t\\t.headline,\\n\\t\\t\\t\\t.link {\\n\\t\\t\\t\\t\\ttransition: 500ms $curve;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\t.number:before {\\n\\t\\t\\t\\t\\twidth: 3em;\\n\\t\\t\\t\\t\\tmargin-right: 1em;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\t.number:after {\\n\\t\\t\\t\\t\\twidth: 0;\\n\\t\\t\\t\\t\\tmargin-right: 0;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\t.location {\\n\\t\\t\\t\\t\\ttransition-delay: 0;\\n\\t\\t\\t\\t\\tbottom: 4em;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\t.headline {\\n\\t\\t\\t\\t\\ttransition-delay: 100ms;\\n\\t\\t\\t\\t\\tbottom: 1.5em;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\t.link {\\n\\t\\t\\t\\t\\tbottom: 0;\\n\\t\\t\\t\\t\\topacity: 1;\\n\\t\\t\\t\\t\\ttransition-delay: 250ms;\\n\\t\\t\\t\\t\\tpointer-events: auto;\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\t\\t}\\n\\t}\\n\\t#footer {\\n\\t\\theight: 12vh;\\n\\t\\tfont-size: 1vh;\\n\\t\\t\\n// \\t\\t#page-counter {\\n\\t\\t\\t\\n// \\t\\t}\\n\\t\\t#dribbble {\\n\\t\\t\\tborder-radius: 2vh;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\tbottom: 4vh;\\n\\t\\t\\tright: 4vh;\\n\\t\\t\\ttransition: 300ms $curve;\\n\\t\\t\\tpadding-left: 1.5vh;\\n\\t\\t\\t\\n\\t\\t\\t&:before,\\n\\t\\t\\t&:after {\\n\\t\\t\\t\\tvertical-align: middle;\\n\\t\\t\\t\\ttransition: inherit;\\n\\t\\t\\t}\\n\\t\\t\\t&:before {\\n\\t\\t\\t\\tdisplay: inline;\\n\\t\\t\\t\\tcontent: 'View original Dribbble';\\n\\t\\t\\t\\tfont-size: 2vh;\\n\\t\\t\\t\\topacity: 0;\\n\\t\\t\\t\\ttransform: translate3D(-200px, 0, 0);\\n\\t\\t\\t}\\n\\t\\t\\t&:after {\\n\\t\\t\\t\\tcontent: '';\\n\\t\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\t\\twidth: 4vh;\\n\\t\\t\\t\\theight: 4vh;\\n\\t\\t\\t\\tmargin-left: 1vh;\\n\\t\\t\\t\\tbackground-image: url(https://alca.tv/static/u/82fde61b-28ef-4f17-976e-8f1abb5a1165.png);\\n\\t\\t\\t\\tbackground-size: contain;\\n\\t\\t\\t\\tbackground-position: center;\\n\\t\\t\\t}\\n\\t\\t\\t&.hover,\\n\\t\\t\\t&:hover {\\n\\t\\t\\t\\tbackground: hsl(337, 78%, 61%);\\n\\t\\t\\t\\t\\n\\t\\t\\t\\t&:before {\\n\\t\\t\\t\\t\\topacity: 1;\\n\\t\\t\\t\\t\\ttransform: translate3D(0, 0, 0);\\n\\t\\t\\t\\t\\ttransition-delay: 50ms;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\t&:after {\\n\\t\\t\\t\\t\\tfilter: saturate(0%) contrast(200%) brightness(200%) invert(100%);\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\t\\t}\\n\\t}\\n}\\n\\n@media (min-width: 1200px) and (max-width: 1699px) {\\n\\tbody {\\n\\t\\t--slides-per-page: 3;\\n\\t}\\n\\t#hero-slides #slides .slide {\\n\\t\\tfont-size: 1vw;\\n\\t}\\n}\\n\\n@media (min-width: 1700px) {\\n\\tbody {\\n\\t\\t--slide-per-age: 4;\\n\\t}\\n\\t#hero-slides #slides .slide {\\n\\t\\tfont-size: 0.75vw;\\n\\t}\\n}\",\"js\":\"let hero = document.getElementById('hero-slides');\\nlet menu = document.getElementById('menu');\\nlet slides = document.getElementById('slides');\\nlet dribbble = document.getElementById('dribbble');\\nlet next = [ 'next', 'next-catch' ].map(n => document.getElementById(n));\\nlet prev = [ 'prev', 'prev-catch' ].map(n => document.getElementById(n));\\nlet slideChildren = slides.children;\\nlet slideCount = slides.children.length;\\nlet currentlyDemoing = false;\\nlet currentPage = 0;\\nlet slidesPerPage = () => window.innerWidth > 1700 ? 4 : window.innerWidth > 1200 ? 3 : 2;\\nlet maxPageCount = () => slideCount / slidesPerPage() - 1;\\n\\nfunction goToPage(pageNumber = 0) {\\n\\tcurrentPage = Math.min(maxPageCount(), Math.max(0, pageNumber));\\n\\tconsole.log(currentPage);\\n\\thero.style.setProperty('--page', currentPage);\\n}\\n\\nfunction sleep(time) {\\n\\treturn new Promise(res => setTimeout(res, time));\\n}\\n\\nfunction hoverSlide(index) {\\n\\tindex in slideChildren &&\\n\\t\\tslideChildren[index].classList.add('hover');\\n}\\n\\nfunction unhoverSlide(index) {\\n\\tindex in slideChildren &&\\n\\t\\tslideChildren[index].classList.remove('hover');\\n}\\n\\nasync function demo() {\\n\\tif(currentlyDemoing) {\\n\\t\\treturn;\\n\\t}\\n\\tcurrentlyDemoing = true;\\n\\tif(currentPage !== 0) {\\n\\t\\tgoToPage(0);\\n\\t\\tawait sleep(800);\\n\\t}\\n\\tlet slides = slidesPerPage();\\n\\tlet pageSeq_ = { 2: [ 1, 2, 1 ], 3: [ 1, 2, 1 / 3 ], 4: [ 1, 1, 0 ] };\\n\\tlet pageSeq = pageSeq_[slides] || pageSeq_[4];\\n\\tlet slideSeq_ = { 2: [ 2, 4, 3 ], 3: [ 3, 6, 2 ], 4: [ 3, 6, 2 ] };\\n\\tlet slideSeq = slideSeq_[slides] || slideSeq_[2];\\n\\tawait sleep(300);\\n\\tgoToPage(pageSeq[0]);\\n\\tawait sleep(500);\\n\\thoverSlide(slideSeq[0]);\\n\\tawait sleep(1200);\\n\\tgoToPage(pageSeq[1]);\\n\\tdribbble.classList.add('hover');\\n\\tunhoverSlide(slideSeq[0]);\\n\\tawait sleep(500);\\n\\thoverSlide(slideSeq[1]);\\n\\tawait sleep(1200);\\n\\tgoToPage(pageSeq[2]);\\n\\tunhoverSlide(slideSeq[1]);\\n\\tawait sleep(300);\\n\\thoverSlide(slideSeq[2]);\\n\\tawait sleep(1600);\\n\\tgoToPage(0);\\n\\tunhoverSlide(slideSeq[2]);\\n\\tdribbble.classList.remove('hover');\\n\\tcurrentlyDemoing = false;\\n}\\n\\nnext.forEach(n => n.addEventListener('click', () => !currentlyDemoing && goToPage(currentPage + 1)));\\nprev.forEach(n => n.addEventListener('click', () => !currentlyDemoing && goToPage(currentPage - 1)));\\nmenu.addEventListener('click', demo);\\n\\nsleep(100).then(demo);\\n\\n// window.addEventListener('resize', () => {\\n\\t// console.log(document.body.style.getPropertyValue('--slide-per-page'));\\n// });\\n\\n/* requestAnimationFrame */\",\"html_pre_processor\":\"pug\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2018-07-30T08:20:59.000Z\",\"updated_at\":\"2020-02-05T07:14:39.000Z\",\"title\":\"Recreating \\\"Motion Study\\\" by Mauricio Vio\",\"description\":\"\",\"slug_hash\":\"VByeJd\",\"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\":null,\"cpid\":\"0164ea46-b1f8-717b-86f2-192ccab4ad23\",\"is_new_editor_pen\":false,\"pen_hash\":null}","__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-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.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","__path_to_infinite_loop_detection":"https://cpwebassets.codepen.io/assets/packs/js/infiniteLoopDetection-f0d5935eb4c2121dfc41.js"}