CodePen Embed - Weird Fishes - ScrollTrigger Markers

Live

This Pen is owned by Alex Trost on CodePen. It is a fork of this Pen.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

{"__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 *; serial *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups-to-escape-sandbox allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"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\":2,\"theme\":\"twilight\",\"id\":\"ZEOMXay\",\"auto_save\":true},\"hashid\":\"ZEOMXay\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js\",\"order\":0,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/ScrollTrigger.min.js\",\"order\":1,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathPlugin.min.js\",\"order\":2,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathHelper.min.js?v=46\",\"order\":3,\"resource_type\":\"js\",\"par_content\":\"\"}],\"tags\":[\"gsap\",\"scrolltrigger\",\"3dtransforms\"],\"id\":48280267,\"user_id\":1385231,\"html\":\"<p class=\\\"indicator\\\">\\n\\t<span>Scroll</span>\\n\\t<span>↓</span>\\n</p>\\n\\n<div class=\\\"fish-wrapper\\\">\\n\\t<div class=\\\"fish\\\">\\n\\t\\t<div class=\\\"fish__skeleton\\\"></div>\\n\\t\\t<div class=\\\"fish__inner\\\">\\n\\t\\t\\t\\n\\t\\t\\t<div class=\\\"fish__body\\\"></div>\\n\\t\\t\\t<div class=\\\"fish__body\\\"></div>\\n\\t\\t\\t<div class=\\\"fish__body\\\"></div>\\n\\t\\t\\t<div class=\\\"fish__body\\\"></div>\\n\\n\\t\\t\\t\\n\\t\\t\\t<div class=\\\"fish__head\\\"></div>\\n\\t\\t\\t<div class=\\\"fish__head fish__head--2\\\"></div>\\n\\t\\t\\t<div class=\\\"fish__head fish__head--3\\\"></div>\\n\\t\\t\\t<div class=\\\"fish__head fish__head--4\\\"></div>\\n\\n\\t\\t\\t<div class=\\\"fish__tail-main\\\"></div>\\n\\t\\t\\t<div class=\\\"fish__tail-fork\\\"></div>\\n\\n\\t\\t\\t<div class=\\\"fish__fin\\\"></div>\\n\\t\\t\\t<div class=\\\"fish__fin fish__fin--2\\\"></div>\\n\\t\\t</div>\\n\\t</div>\\n</div>\\n\\n<div class=\\\"bubbles\\\">\\n\\t<div class=\\\"bubbles__inner\\\">\\n\\t\\t<div class=\\\"bubbles__bubble\\\"></div>\\n\\t\\t<div class=\\\"bubbles__bubble\\\"></div>\\n\\t\\t<div class=\\\"bubbles__bubble\\\"></div>\\n\\t</div>\\n</div>\\n\\n<div class=\\\"rays\\\"><div data-rays></div></div>\\n\\n<div class=\\\"lights\\\">\\n\\t<div class=\\\"lights__group\\\" data-lights=\\\"1\\\">\\n\\t\\t<div class=\\\"lights__light\\\"></div>\\n\\t\\t<div class=\\\"lights__light\\\"></div>\\n\\t\\t<div class=\\\"lights__light\\\"></div>\\n\\t\\t<div class=\\\"lights__light\\\"></div>\\n\\t\\t<div class=\\\"lights__light\\\"></div>\\n\\t\\t<div class=\\\"lights__light\\\"></div>\\n\\t\\t<div class=\\\"lights__light\\\"></div>\\n\\t\\t<div class=\\\"lights__light\\\"></div>\\n\\t</div>\\n</div>\\n\\n<div class=\\\"content\\\">\\n\\t<section>\\n\\t\\t<div class=\\\"section__content\\\">\\n\\t\\t\\t<p>In the deepest ocean</p>\\n\\t\\t</div>\\n\\t</section>\\n\\t<section>\\n\\t\\t<div class=\\\"section__content\\\">\\n\\t\\t\\t<p>the bottom of the sea</p>\\n\\t\\t</div>\\n\\t</section>\\n\\t<section>\\n\\t\\t<div class=\\\"section__content\\\">\\n\\t\\t\\t<p>Your eyes...</p>\\n\\t\\t</div>\\n\\t</section>\\n\\t<section>\\n\\t\\t<div class=\\\"section__content\\\">\\n\\t\\t\\t<p>they turn me...</p>\\n\\t\\t</div>\\n\\t</section>\\n\\t<section>\\n\\t\\t<div class=\\\"section__content\\\">\\n\\t\\t\\t<p>turn me on to phantoms</p>\\n\\t\\t</div>\\n\\t</section>\\n\\t<section>\\n\\t\\t<div class=\\\"section__content\\\">\\n\\t\\t\\t<p>I follow to the edge of the earth</p>\\n\\t\\t</div>\\n\\t</section>\\n\\t<section>\\n\\t\\t<div class=\\\"section__content\\\">\\n\\t\\t\\t<p>and fall off</p>\\n\\t\\t</div>\\n\\t</section>\\n\\t<section>\\n\\t\\t<div class=\\\"section__content\\\">\\n\\t\\t\\t<p>I get eaten by the worms</p>\\n\\t\\t</div>\\n\\t</section>\\n\\t<section>\\n\\t\\t<div class=\\\"section__content\\\">\\n\\t\\t\\t<p>and weird fishes</p>\\n\\t\\t</div>\\n\\t</section>\\n\\t<section>\\n\\t\\t<div class=\\\"section__content\\\">\\n\\t\\t\\t<p>Hit the bottom and escape</p>\\n\\t\\t</div>\\n\\t</section>\\n\\t<section>\\n\\t\\t<div class=\\\"section__content\\\">\\n\\t\\t\\t<p>escape</p>\\n\\t\\t</div>\\n\\t</section>\\n</div>\",\"css\":\"@import url('https://fonts.googleapis.com/css2?family=Judson&display=swap');\\n\\n* {\\n\\tbox-sizing: border-box;\\n}\\n\\nbody {\\n\\tfont-family: 'Judson', serif;\\n\\tbackground: linear-gradient(to bottom,\\n\\t\\trgba(99, 167, 191, 1),\\n\\t\\trgba(94, 86, 179, 1),\\n\\t\\trgba(72, 139, 163, 1),\\n\\t\\trgba(79, 124, 179, 1),\\n\\t\\trgba(52, 115, 140, 1),\\n\\t\\trgba(48, 92, 145, 1),\\n\\t\\trgba(39, 82, 145, 1),\\n\\t\\trgba(19, 58, 110, 1),\\n\\t\\trgba(10, 50, 80, 1),\\n\\t\\trgba(40, 41, 100, 1),\\n\\t\\trgba(14, 52, 94, 1),\\n\\t\\tblack);\\n\\tmax-width: 100vw;\\n\\tmin-height: 100vh;\\n\\toverflow-x: hidden;\\n\\tcolor: white;\\n\\tposition: relative;\\n\\tmargin: 0;\\n\\t\\n\\t&::after {\\n\\t\\tposition: fixed;\\n\\t\\tcontent: '';\\n\\t\\tpointer-events: none;\\n\\t\\ttop: 0;\\n\\t\\tleft: 0;\\n\\t\\twidth: 100%;\\n\\t\\theight: 100vh;\\n\\t\\tbackground: radial-gradient(circle at center, transparent, rgba(0, 0, 0, 0.5));\\n\\t}\\n\\t\\n\\t@media (min-width: 40em) {\\n\\t\\tfont-size: 2rem;\\n\\t}\\n}\\n\\n.rays {\\n\\t--r: 10deg;\\n\\t--c: rgba(255, 251, 227, 0.2);\\n\\t--size: max(60vh, 80rem);\\n\\t--mask: radial-gradient(circle at center, black, transparent 50%);\\n\\tposition: fixed;\\n\\tpointer-events: none;\\n\\ttop: calc(var(--size) * -0.55);\\n\\tleft: 50%;\\n\\twidth: var(--size);\\n\\theight: var(--size);\\n\\tpointer-events: none;\\n\\t\\n\\t> div {\\n\\t\\twidth: 100%;\\n\\t\\theight: 100%;\\n\\t\\tborder-radius: 50%;\\n\\t\\tbackground: repeating-conic-gradient(var(--c), var(--c) var(--r), transparent var(--r), transparent calc(var(--r) * 2));\\n\\t\\t-webkit-mask-image: var(--mask);\\n\\t\\tmask-image: var(--mask);\\n\\t\\t// animation: raysRotate 120000ms linear infinite;\\n\\t}\\n}\\n\\n@keyframes raysRotate {\\n\\t50% {\\n\\t\\ttransform: rotate(180deg) scale(1.5);\\n\\t}\\n\\t100% {\\n\\t\\ttransform: rotate(360deg) scale(1);\\n\\t}\\n}\\n\\n.fish-wrapper {\\n\\t--mask: linear-gradient(180deg, rgba(0, 0, 0, 1.0), transparent);\\n\\twidth: 100%;\\n\\theight: 100vh;\\n\\tposition: fixed;\\n\\ttop: 0;\\n\\tleft: 0;\\n\\tperspective: 100rem;\\n\\tperspective-origin: center center;\\n\\ttransform-style: preserve-3d;\\n\\tpointer-events: none;\\n\\t-webkit-mask-image: var(--mask);\\n\\tmask-image: var(--mask);\\n\\tz-index: 2;\\n}\\n\\n.fish {\\n\\t--bodyW: 2rem;\\n\\t--o: 0.95;\\n\\t--l: 100%;\\n\\t--c: hsla(250deg, 50%, var(--l), var(--o, 0.6));\\n\\t--size: 10rem;\\n\\tposition: relative;\\n\\twidth: var(--size);\\n\\theight: var(--size);\\n\\ttransform-style: preserve-3d;\\n\\ttransform-origin: center;\\n\\t\\n\\t@media (min-width: 1000px) {\\n\\t\\t--size: 20rem;\\n\\t\\t--bodyW: 4rem;\\n\\t}\\n}\\n\\n.fish__skeleton {\\n\\t--clip: polygon(0 var(--bodyW), 45% 0, 55% 0, 100% var(--bodyW), 50% 100%);\\n\\tposition: absolute;\\n\\twidth: 100%;\\n\\theight: 100%;\\n\\tbackground: \\n\\t\\trepeating-linear-gradient(0deg, var(--c), var(--c) 0.1rem, transparent 0, transparent 0.5rem),\\n\\t\\tlinear-gradient(var(--c) var(--bodyW), transparent var(--bodyW)), \\n\\t\\tlinear-gradient(90deg, transparent calc((var(--bodyW) / 2) - 0.1rem), var(--c) 0, var(--c) calc((var(--bodyW) / 2) + 0.1rem), transparent 0);\\n\\ttop: calc(var(--bodyW) / 4);\\n\\tleft: calc(var(--bodyW) * 0.75);\\n\\twidth: var(--bodyW);\\n\\theight: calc(var(--bodyW) * 4);\\n\\t-webkit-clip-path: var(--clip);\\n\\tclip-path: var(--clip);\\n\\topacity: 0;\\n\\ttransform: translate3d(0, 0, calc(var(--bodyW) / -2)) rotate(90deg);\\n\\ttransform-origin: center center;\\n}\\n\\n.fish__inner {\\n\\t--a: 9.5deg;\\n\\twidth: calc(var(--bodyW) * 1.5);\\n\\theight: var(--size);\\n\\ttransform-style: preserve-3d;\\n\\ttransform: rotate(90deg);\\n}\\n\\n.fish__body {\\n\\t--l: 75%;\\n\\t--c: hsla(250deg, 50%, var(--l), var(--o, 0.6));\\n\\tposition: absolute;\\n\\ttop: var(--bodyW);\\n\\tleft: 0;\\n\\twidth: var(--bodyW);\\n\\theight: calc(3 * var(--bodyW));\\n\\tbackground: var(--c);\\n\\tclip-path: polygon(0 0, 100% 0, 50% 100%);\\n\\ttransform: translateZ(calc(var(--bodyW) / -2)) rotateX(var(--a));\\n\\ttransform-origin: center top;\\n\\t\\n\\t&:nth-child(2) {\\n\\t\\t--i: 2;\\n\\t\\t--l: 75%;\\n\\t\\ttransform: translateZ(calc(var(--bodyW) / 2)) rotateX(calc(var(--a) * -1));\\n\\t}\\n\\t\\n\\t&:nth-child(3) {\\n\\t\\t--i: 3;\\n\\t\\t--l: 95%;\\n\\t\\ttransform: rotateY(90deg) translate3d(calc(var(--bodyW) / -2), 0, 0) rotateX(var(--a));\\n\\t\\ttransform-origin: left top;\\n\\t}\\n\\t\\n\\t&:nth-child(4) {\\n\\t\\t--i: 4;\\n\\t\\t--l: 50%;\\n\\t\\ttransform: rotateY(90deg) translate3d(calc(var(--bodyW) / 2), 0, 0) rotateX(calc(var(--a) * -1));\\n\\t\\ttransform-origin: right top;\\n\\t}\\n}\\n\\n.fish__head {\\n\\t--a: 23.5deg;\\n\\t--l: 85%;\\n\\t--c: hsla(250deg, 50%, var(--l), var(--o, 0.6));\\n\\tposition: absolute;\\n\\ttop: 0;\\n\\tleft: 0;\\n\\twidth: var(--bodyW);\\n\\theight: var(--bodyW);\\n\\tbackground: var(--c);\\n\\tclip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);\\n\\ttransform: translateZ(calc(var(--bodyW) / 2)) rotateX(var(--a));\\n\\ttransform-origin: center bottom;\\n\\t\\n\\t&--2 {\\n\\t\\t--i: 2;\\n\\t\\t--l: 80%;\\n\\t\\ttransform: translateZ(calc(var(--bodyW) / -2)) rotateX(calc(var(--a) * -1));\\n\\t}\\n\\t\\n\\t&--3 {\\n\\t\\t--i: 3;\\n\\t\\t--l: 90%;\\n\\t\\ttransform: rotateY(90deg) translate3d(calc(var(--bodyW) / -2), 0, 0) rotateX(calc(var(--a) * -1));\\n\\t\\ttransform-origin: left bottom;\\n\\t}\\n\\t\\n\\t&--4 {\\n\\t\\t--l: 55%;\\n\\t\\ttransform: rotateY(90deg) translate3d(calc(var(--bodyW) / 2), 0, 0) rotateX(var(--a));\\n\\t\\ttransform-origin: right bottom;\\n\\t}\\n}\\n\\n.fish__tail-main {\\n\\t--o: 0.9;\\n\\t--l: 90%;\\n\\t--c: hsla(250deg, 50%, var(--l), var(--o, 0.6));\\n\\twidth: var(--bodyW);\\n\\theight: var(--bodyW);\\n\\tbackground-color: var(--c);\\n\\tposition: absolute;\\n\\tleft: 0;\\n\\tbottom: var(--bodyW);\\n\\tclip-path: polygon(50% 0, 100% 100%, 0 100%);\\n}\\n\\n.fish__tail-fork {\\n\\t--o: 0.9;\\n\\t--l: 95%;\\n\\t--c: hsla(250deg, 50%, var(--l), var(--o, 0.6));\\n\\twidth: var(--bodyW);\\n\\theight: var(--bodyW);\\n\\tbackground-color: var(--c);\\n\\tposition: absolute;\\n\\tleft: 0;\\n\\tbottom: 0;\\n\\tclip-path: polygon(0 0, 100% 0, 100% 70%, 90% 100%, 70% 70%, 50% 30%, 30% 70%, 10% 100%, 0 70%);\\n\\ttransform-origin: top center;\\n\\ttransform: rotateX(-45deg);\\n\\tanimation: tail 1000ms infinite alternate;\\n}\\n\\n.fish__fin {\\n\\twidth: calc(var(--bodyW) / 8 * 3);\\n\\theight: var(--bodyW);\\n\\tbackground-color: var(--c);\\n\\tposition: absolute;\\n\\ttop: calc(var(--bodyW) * 1.5);\\n\\tleft: calc(var(--bodyW) / 8 * 3);\\n\\tclip-path: polygon(50% 0, 100% 30%, 100% 60%, 50% 100%, 0 60%, 0 30%);\\n\\ttransform-origin: top center;\\n\\ttransform: translateZ(calc(var(--bodyW) / 2)) rotateY(0deg) rotateX(5deg) rotate(10deg);\\n\\tanimation: fin 1500ms infinite alternate linear;\\n\\t\\n\\t&--2 {\\n\\t\\ttransform: translateZ(calc(var(--bodyW) / -2)) rotateY(0deg) rotateX(-5deg) rotate(10deg);\\n\\t\\tanimation: fin2 1500ms infinite alternate linear;\\n\\t}\\n}\\n\\n@keyframes tail {\\n\\tto {\\n\\t\\ttransform: rotateX(45deg);\\n\\t}\\n}\\n\\n@keyframes fin {\\n\\t100% {\\n\\t\\ttransform: translateZ(calc(var(--bodyW) / 2)) rotateY(10deg) rotateX(20deg) rotate(-10deg);\\n\\t}\\n}\\n\\n@keyframes fin2 {\\n\\t100% {\\n\\t\\ttransform: translateZ(calc(var(--bodyW) / -2)) rotateY(-10deg) rotateX(-20deg) rotate(-10deg);\\n\\t}\\n}\\n\\n/* Lights */\\n.lights {\\n\\tposition: fixed;\\n\\tpointer-events: none;\\n\\ttop: 0;\\n\\tleft: 0;\\n\\twidth: 100%;\\n\\theight: 100vh;\\n}\\n\\n.lights__group {\\n\\tposition: relative;\\n\\theight: 100%;\\n}\\n\\n.lights__light {\\n\\t--size: 0.35rem;\\n\\twidth: var(--size);\\n\\theight: var(--size);\\n\\tposition: absolute;\\n\\tbackground: rgba(255, 255, 255, 1);\\n\\tborder-radius: 100%;\\n\\ttop: 10%;\\n\\tleft: 25%;\\n\\tfilter: blur(0.1rem);\\n\\tanimation: blink 2500ms var(--d, 0ms) infinite alternate;\\n\\t\\n\\t&:nth-child(2) {\\n\\t\\t--d: 200ms;\\n\\t\\ttop: 40%;\\n\\t\\tleft: 12%;\\n\\t}\\n\\t\\n\\t&:nth-child(3) {\\n\\t\\t--d: 350ms;\\n\\t\\ttop: 60%;\\n\\t\\tleft: 18%;\\n\\t}\\n\\t\\n\\t&:nth-child(4) {\\n\\t\\t--d: 600ms;\\n\\t\\ttop: 25%;\\n\\t\\tleft: 66%;\\n\\t}\\n\\t\\n\\t&:nth-child(5) {\\n\\t\\t--d: 1210ms;\\n\\t\\ttop: 43%;\\n\\t\\tleft: 55%;\\n\\t}\\n\\t\\n\\t&:nth-child(6) {\\n\\t\\t--d: 420ms;\\n\\t\\ttop: 90%;\\n\\t\\tleft: 37%;\\n\\t}\\n\\t\\n\\t&:nth-child(7) {\\n\\t\\t--d: 1100ms;\\n\\t\\ttop: 82%;\\n\\t\\tleft: 91%;\\n\\t}\\n\\t\\n\\t&:nth-child(8) {\\n\\t\\t--d: 1560ms;\\n\\t\\ttop: 67%;\\n\\t\\tleft: 81%;\\n\\t}\\n}\\n\\n@keyframes blink {\\n\\tto {\\n\\t\\topacity: 0;\\n\\t}\\n}\\n\\n\\n.content {\\n\\tposition: relative;\\n\\tz-index: 1;\\n\\tpadding-bottom: 100vh;\\n}\\n\\nsection {\\n\\theight: 100vh;\\n\\twidth: 100%;\\n\\tmargin-top: 100vh;\\n\\tborder:1px solid red;\\n\\t\\n\\t&:nth-child(4n),\\n\\t&:nth-child(4n - 1) {\\n\\t\\t--col: 3;\\n\\t}\\n}\\n\\n.section__content {\\n\\twidth: 100%;\\n\\tposition: fixed;\\n\\ttop: 0;\\n\\theight: 100vh;\\n\\tdisplay: flex;\\n\\tjustify-content: center;\\n\\talign-items: center;\\n\\tpadding: 1rem;\\n\\t\\n\\t@media (min-width: 50rem) {\\n\\t\\tdisplay: grid;\\n\\t\\tgrid-template-columns: repeat(3, minmax(0, 25rem));\\n\\t\\tgap: 2rem;\\n\\t\\tpadding: 3rem;\\n\\t\\t\\n\\t\\t> * {\\n\\t\\t\\tgrid-column: var(--col, 1);\\n\\t\\t\\topacity: 0;\\n\\t\\t}\\n\\t}\\n}\\n\\n.bubbles {\\n\\tposition: fixed;\\n\\ttop: 0;\\n\\tleft: 5rem;\\n\\t// transform-style: preserve-3d;\\n\\ttransform-origin: center;\\n\\ttransform: translate3d(10rem, 5rem, 0) rotateX(20deg) rotateY(0deg)\\n}\\n\\n.bubbles__inner {\\n\\twidth: 10rem;\\n\\theight: 10rem;\\n}\\n\\n.bubbles__bubble {\\n\\t--c: rgba(255, 255, 255, 0.4);\\n\\t--size: 2.5rem;\\n\\tposition: absolute;\\n\\twidth: var(--size);\\n\\theight: var(--size);\\n\\tborder-radius: 50%;\\n\\tbackground: radial-gradient(transparent 30%, var(--c, white)), radial-gradient(circle at 100% 0%, transparent 30%, var(--c, white));\\n\\ttransform-origin: center;\\n\\ttransform: scale(0);\\n\\topacity: 0;\\n\\t\\n\\t&:nth-child(2) {\\n\\t\\t--size: 1.8rem;\\n\\t\\ttop: 3rem;\\n\\t\\tleft: 2rem;\\n\\t}\\n\\t\\n\\t&:nth-child(3) {\\n\\t\\t--size: 1.2rem;\\n\\t\\ttop: 6rem;\\n\\t\\tleft: 0;\\n\\t}\\n}\\n\\n.indicator {\\n\\ttext-align: center;\\n\\tposition: fixed;\\n\\tbottom: 1rem;\\n\\tleft: 50%;\\n\\ttransform: translate3d(-50%, 0, 0);\\n\\tfont-size: 1.2rem;\\n\\t\\n\\tspan {\\n\\t\\tdisplay: block;\\n\\t\\t\\n\\t\\t&:nth-child(2) {\\n\\t\\t\\tanimation: arrowMove 600ms infinite alternate;\\n\\t\\t}\\n\\t}\\n}\\n\\n@keyframes arrowMove {\\n\\tto {\\n\\t\\ttransform: translate3d(0, 0.5rem, 0);\\n\\t}\\n}\",\"js\":\"gsap.registerPlugin(ScrollTrigger)\\ngsap.registerPlugin(MotionPathPlugin)\\n\\nconst rx = window.innerWidth < 1000 ? window.innerWidth / 1200 : 1\\nconst ry = window.innerHeight < 700 ? window.innerHeight / 1200 : 1\\n\\nconst path = [\\n\\t\\t\\t// 1\\n\\t\\t\\t{ x: 800, y: 200 },\\n\\t\\t\\t{ x: 900, y: 20 },\\n\\t\\t\\t{ x: 1100, y: 100 },\\n\\t\\t\\t// 2\\n\\t\\t\\t{ x: 1000, y: 200 },\\n\\t\\t\\t{ x: 900, y: 20 },\\n\\t\\t\\t{ x: 10, y: 500 },\\n\\t\\t\\t// 3\\n\\t\\t\\t{ x: 100, y: 300 },\\n\\t\\t\\t{ x: 500, y: 400 },\\n\\t\\t\\t{ x: 1000, y: 200 },\\n\\t\\t\\t// 4\\n\\t\\t\\t{ x: 1100, y: 300 },\\n\\t\\t\\t{ x: 400, y: 400 },\\n\\t\\t\\t{ x: 200, y: 250 },\\n\\t\\t\\t// 5\\n\\t\\t\\t{ x: 100, y: 300 },\\n\\t\\t\\t{ x: 500, y: 450 },\\n\\t\\t\\t{ x: 1100, y: 500 }\\n\\t\\t]\\n\\nconst scaledPath = path.map(({ x, y }) => {\\n\\treturn {\\n\\t\\tx: x * rx,\\n\\t\\ty: y * ry\\n\\t}\\n})\\n\\nconst sections = [...document.querySelectorAll('section')]\\nconst fish = document.querySelector('.fish')\\nconst fishHeadAndBody = \\n\\t\\t\\t[\\n\\t\\t\\t\\t...document.querySelectorAll('.fish__head'),\\n\\t\\t\\t\\t...document.querySelectorAll('.fish__body')\\n\\t\\t\\t]\\nconst lights = [...document.querySelectorAll('[data-lights]')]\\nconst rays = document.querySelector('[data-rays]')\\n\\nconst bubbles = gsap.timeline()\\nbubbles.set('.bubbles__bubble', {\\n\\ty: 100,\\n})\\nbubbles.to('.bubbles__bubble', {\\n\\tscale: 1.2,\\n\\ty: -300,\\n\\topacity: 1,\\n\\tduration: 2,\\n\\tstagger: 0.2,\\n})\\nbubbles.to('.bubbles__bubble', {\\n\\tscale: 1,\\n\\topacity: 0,\\n\\tduration: 1,\\n}, '-=1')\\n\\nbubbles.pause()\\n\\nconst tl = gsap.timeline({\\n\\tscrollTrigger: {\\n\\t\\tscrub: 1.5,\\n\\t},\\n})\\ntl.to(fish, {\\n\\tmotionPath: {\\n\\t\\tpath: scaledPath,\\n\\t\\talign: 'self',\\n\\t\\talignOrigin: [0.5, 0.5],\\n\\t\\tautoRotate: true\\n\\t},\\n\\tduration: 10,\\n\\timmediateRender: true,\\n\\t// ease: 'power4'\\n})\\ntl.to('.indicator', {\\n\\topacity: 0\\n}, 0)\\ntl.to(fish, {\\n\\trotateX: 180\\n}, 1)\\ntl.to(fish, {\\n\\trotateX: 0\\n}, 2.5)\\ntl.to(fish, {\\n\\tz: -500,\\n\\tduration: 2,\\n}, 2.5)\\ntl.to(fish, {\\n\\trotateX: 180\\n}, 4)\\ntl.to(fish, {\\n\\trotateX: 0\\n}, 5.5)\\ntl.to(fish, {\\n\\tz: -50,\\n\\tduration: 2,\\n}, 5)\\ntl.to(fish, {\\n\\trotate: 0,\\n\\tduration: 1,\\n}, '-=1')\\ntl.to('.fish__skeleton', {\\n\\topacity: 0.6,\\n\\tduration: 0.1,\\n\\trepeat: 4\\n}, '-=3')\\ntl.to(fishHeadAndBody, {\\n\\topacity: 0,\\n\\tduration: 0.1,\\n\\trepeat: 4\\n}, '-=3')\\ntl.to('.fish__inner', {\\n\\topacity: 0.1,\\n\\tduration: 1\\n}, '-=1')\\ntl.to('.fish__skeleton', {\\n\\topacity: 0.1,\\n\\tduration: 1\\n}, '-=1')\\n\\nbubbles.play()\\ntl.pause()\\n\\nconst lightsTl = gsap.timeline({\\n\\tscrollTrigger: {\\n\\t\\tscrub: 6\\n\\t}\\n})\\nlightsTl.from(lights[0], {\\n\\tx: window.innerWidth * -1,\\n\\ty: window.innerHeight,\\n\\tease: 'power4.out',\\n\\tduration: 80\\n}, 0)\\nlightsTl.to(lights[0], {\\n\\tx: window.innerWidth,\\n\\ty: window.innerHeight * -1,\\n\\tease: 'power4.out',\\n\\tduration: 80\\n}, '-=5')\\n\\nconst makeBubbles = (p, i) => {\\n\\tconst { top, left } = fish.getBoundingClientRect()\\n\\tgsap.to(p, { opacity: 1, duration: 1 })\\n\\tgsap.set('.bubbles', {\\n\\t\\tx: left,\\n\\t\\ty: top\\n\\t})\\n\\tif (bubbles.paused) {\\n\\t\\tbubbles.restart()\\n\\t}\\n\\tif (i > 6) {\\n\\t\\tgsap.to('.bubbles', {\\n\\t\\t\\topacity: 0\\n\\t\\t})\\n\\t}\\n}\\n\\nconst rotateFish = (self) => {\\n\\tif (self.direction === -1) {\\n\\t\\tgsap.to(fish, { rotationY: 180, duration: 0.4 })\\n\\t} else {\\n\\t\\tgsap.to(fish, { rotationY: 0, duration: 0.4 })\\n\\t}\\n}\\n\\nconst hideText = (p) => {\\n\\tgsap.to(p, { opacity: 0, duration: 1 })\\n}\\n\\nsections.forEach((section, i) => {\\n\\tconst p = section.querySelector('p')\\n\\tgsap.to(p, { opacity: 0 })\\n\\t\\n\\tScrollTrigger.create({\\n\\t\\ttrigger: section,\\n\\t\\tmarkers:true,\\n\\t\\tstart: \\\"top top\\\",\\n\\t\\tonEnter: () => makeBubbles(p, i),\\n\\t\\tonEnterBack: () => {\\n\\t\\t\\tif (i <= 6) {\\n\\t\\t\\t\\tgsap.to('.bubbles', {\\n\\t\\t\\t\\t\\topacity: 1\\n\\t\\t\\t\\t})\\n\\t\\t\\t}\\n\\t\\t},\\n\\t\\tonLeave: () => {\\n\\t\\t\\thideText(p)\\n\\t\\t\\tif (i == 0) {\\n\\t\\t\\tgsap.to('.rays', {\\n\\t\\t\\t\\topacity: 0,\\n\\t\\t\\t\\ty: -500,\\n\\t\\t\\t\\tduration: 8,\\n\\t\\t\\t\\tease: 'power4.in'\\n\\t\\t\\t})\\n\\t\\t\\t}\\n\\t\\t},\\n\\t\\tonLeaveBack: () => hideText(p),\\n\\t\\tonUpdate: (self) => rotateFish(self)\\n\\t})\\n})\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2020-11-06T22:47:52.000Z\",\"updated_at\":\"2020-11-26T01:45:30.000Z\",\"title\":\"Weird Fishes - ScrollTrigger Markers\",\"description\":\"A GSAP ScrollTrigger experiment inspired by the Radiohead song\",\"slug_hash\":\"ZEOMXay\",\"head\":\"\",\"private\":true,\"slug_hash_private\":\"8f1b1d6fbb5cdb88c922bebc0e3622a4\",\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":47097525,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"01759fbe-a1c0-7cad-9e0a-eb6f54bc3a59\",\"is_new_editor_pen\":false,\"protected\":false,\"access\":\"Private\",\"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"}