{"__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.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjg2MzkxNTAzLCJpYXQiOjE2ODYzODc5MDMsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.Czd7uCDtCVgpwKJJog4u50oBSlDS5vM0xYrtd__AQP58mBPhDEaGxuqJKuC-huwCRck7M9O6-CeX6zpv_OcUXiL7Lhx0-S3szr46ODvoVAiDM9PcEsem110nKf8NknNqqM8rX5zVj9sqraSoJGfH0vdiov_AqP259GRYHywFCoNnSal1_YhrssyC8Qbk_jaqpAHA-qldm1zf-NLZafeGlzvRBmJisegEOmIarg6-limYrEJDA7yCDRZtfbEmXkN11iaVyt9nTCJYyOumX2IVud1VnbfFpItQ89pb8sPGKARAfXvR6c7rcAKY_cSxUabSjyUewH8Dbg6HweFCWLZj_w"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":61889943,\"user_id\":474854,\"html\":\"<section class=\\\"panel\\\">\\n <div class=\\\"special blue\\\">\\n <div class=\\\"container-fluid bg\\\">\\n <div class=\\\"row vh-100\\\">\\n <div class=\\\"col-lg-12 d-flex justify-content-center align-items-end \\\">\\n\\n <h2 class=\\\"text1 py-5\\\">SAMPLE TEXT.<\\/h2>\\n <div class=\\\"playFirstVideo\\\">Play video<\\/div>\\n <img id=\\\"masked\\\" src=\\\"https:\\/\\/assets.codepen.io\\/474854\\/bg_white.jpg\\\" alt=\\\"the kitten, masked\\\" width=\\\"100%\\\">\\n <\\/div>\\n <\\/div>\\n <\\/div>\\n\\n <\\/div>\\n <div class=\\\"special\\\">\\n <div class=\\\"container-fluid p-0\\\">\\n <div class=\\\"row vh-100\\\">\\n <div class=\\\"col-lg-12\\\">\\n <video loop width=\\\"100%\\\" height=\\\"100%\\\" id=\\\"firstVideo\\\">\\n <source src=\\\"https:\\/\\/assets.codepen.io\\/474854\\/Video1.mp4\\\" type=\\\"video\\/mp4\\\">\\n Sorry, your browser doesn't support embedded videos.\\n <\\/video>\\n\\n <\\/div>\\n <\\/div>\\n <\\/div>\\n\\n <\\/div>\\n\\n<\\/section>\\n\\n<section class=\\\"panel\\\"><\\/section>\\n<section class=\\\"panel red\\\">\\n <div class=\\\"container\\\">\\n <div class=\\\"row vh-100 align-items-center\\\">\\n <div class=\\\"col-lg-12 text-center\\\">\\n <div class=\\\"text2\\\">ONE<\\/div>\\n <\\/div>\\n <\\/div>\\n <\\/div>\\n<\\/section>\\n<section class=\\\"panel orange\\\">\\n <div class=\\\"container\\\">\\n <div class=\\\"row vh-100 align-items-center\\\">\\n <div class=\\\"col-lg-12 text-center\\\">\\n <div class=\\\"text3\\\">TWO<\\/div>\\n <\\/div>\\n <\\/div>\\n <\\/div>\\n<\\/section>\\n<section class=\\\"panel purple\\\">\\n <div class=\\\"container\\\">\\n <div class=\\\"row vh-100 align-items-center\\\">\\n <div class=\\\"col-lg-12 text-center\\\">\\n <div class=\\\"text4\\\">THREE<\\/div>\\n <\\/div>\\n <\\/div>\\n <\\/div>\\n<\\/section>\\n<section class=\\\"panel green\\\">\\n <div class=\\\"container\\\">\\n <div class=\\\"row vh-100 align-items-center\\\">\\n <div class=\\\"col-lg-12 text-center\\\">\\n <div class=\\\"text5\\\">FOUR<\\/div>\\n <\\/div>\\n <\\/div>\\n <\\/div>\\n<\\/section>\",\"css\":\"body {\\n \\n overflow-x:hidden !important;\\n \\n}\\n\\n.panel.align-top {\\n align-items: flex-start;\\n}\\n\\n.panel h1 {\\n font-size: 1.8em;\\n color: white;\\n font-weight: 300;\\n margin: 0 auto;\\n}\\n.panel.description {\\n padding-bottom: 60px;\\n}\\n.panel p, .panel li {\\n color: black;\\n font-weight: 400;\\n text-align: left;\\n font-size: 0.8em;\\n line-height: 1.5em;\\n margin: 0.3em 0 1em 0;\\n}\\n.panel p strong, .panel li strong {\\n color: white;\\n font-weight: 400;\\n}\\n.panel p code, .panel li code {\\n background-color: rgba(255,255,255,0.15);\\n padding: 2px 4px;\\n border-radius: 5px;\\n}\\n.panel li {\\n margin: 0;\\n}\\n.gray {\\n background-color: #777;\\n background-image: radial-gradient(circle at 47% 14%, rgba(205, 205, 205,0.04) 0%, rgba(205, 205, 205,0.04) 43%,transparent 43%, transparent 100%),radial-gradient(circle at 35% 12%, rgba(215, 215, 215,0.04) 0%, rgba(215, 215, 215,0.04) 4%,transparent 4%, transparent 100%),radial-gradient(circle at 1% 35%, rgba(24, 24, 24,0.04) 0%, rgba(24, 24, 24,0.04) 37%,transparent 37%, transparent 100%),radial-gradient(circle at 21% 1%, rgba(0, 0, 0,0.04) 0%, rgba(0, 0, 0,0.04) 26%,transparent 26%, transparent 100%),radial-gradient(circle at 23% 82%, rgba(249, 249, 249,0.04) 0%, rgba(249, 249, 249,0.04) 60%,transparent 60%, transparent 100%),radial-gradient(circle at 11% 54%, rgba(251, 251, 251,0.04) 0%, rgba(251, 251, 251,0.04) 23%,transparent 23%, transparent 100%),radial-gradient(circle at 69% 68%, rgba(234, 234, 234,0.04) 0%, rgba(234, 234, 234,0.04) 10%,transparent 10%, transparent 100%),linear-gradient(90deg, #777,#606060);\\n}\\n.blue {\\n background-color: #2c7ad2;\\n background-image: radial-gradient(circle at 47% 14%, rgba(205, 205, 205,0.04) 0%, rgba(205, 205, 205,0.04) 43%,transparent 43%, transparent 100%),radial-gradient(circle at 35% 12%, rgba(215, 215, 215,0.04) 0%, rgba(215, 215, 215,0.04) 4%,transparent 4%, transparent 100%),radial-gradient(circle at 1% 35%, rgba(24, 24, 24,0.04) 0%, rgba(24, 24, 24,0.04) 37%,transparent 37%, transparent 100%),radial-gradient(circle at 21% 1%, rgba(0, 0, 0,0.04) 0%, rgba(0, 0, 0,0.04) 26%,transparent 26%, transparent 100%),radial-gradient(circle at 23% 82%, rgba(249, 249, 249,0.04) 0%, rgba(249, 249, 249,0.04) 60%,transparent 60%, transparent 100%),radial-gradient(circle at 11% 54%, rgba(251, 251, 251,0.04) 0%, rgba(251, 251, 251,0.04) 23%,transparent 23%, transparent 100%),radial-gradient(circle at 69% 68%, rgba(234, 234, 234,0.04) 0%, rgba(234, 234, 234,0.04) 10%,transparent 10%, transparent 100%),linear-gradient(90deg, #2c7ad2,#1568c6);\\n}\\n.orange {\\n background-color: #e77614;\\n background-image: radial-gradient(circle at 46% 40%, rgba(228, 228, 228,0.06) 0%, rgba(228, 228, 228,0.06) 13%,transparent 13%, transparent 100%),radial-gradient(circle at 11% 41%, rgba(198, 198, 198,0.06) 0%, rgba(198, 198, 198,0.06) 19%,transparent 19%, transparent 100%),radial-gradient(circle at 52% 23%, rgba(14, 14, 14,0.06) 0%, rgba(14, 14, 14,0.06) 69%,transparent 69%, transparent 100%),radial-gradient(circle at 13% 85%, rgba(148, 148, 148,0.06) 0%, rgba(148, 148, 148,0.06) 44%,transparent 44%, transparent 100%),radial-gradient(circle at 57% 74%, rgba(232, 232, 232,0.06) 0%, rgba(232, 232, 232,0.06) 21%,transparent 21%, transparent 100%),radial-gradient(circle at 59% 54%, rgba(39, 39, 39,0.06) 0%, rgba(39, 39, 39,0.06) 49%,transparent 49%, transparent 100%),radial-gradient(circle at 98% 38%, rgba(157, 157, 157,0.06) 0%, rgba(157, 157, 157,0.06) 24%,transparent 24%, transparent 100%),radial-gradient(circle at 8% 6%, rgba(60, 60, 60,0.06) 0%, rgba(60, 60, 60,0.06) 12%,transparent 12%, transparent 100%),linear-gradient(90deg, #ff7600, #ff7600);\\n}\\n\\n.red {\\n background-color: #c82736;\\n background-image: radial-gradient(circle at 19% 90%, rgba(190, 190, 190,0.04) 0%, rgba(190, 190, 190,0.04) 17%,transparent 17%, transparent 100%),radial-gradient(circle at 73% 2%, rgba(78, 78, 78,0.04) 0%, rgba(78, 78, 78,0.04) 94%,transparent 94%, transparent 100%),radial-gradient(circle at 45% 2%, rgba(18, 18, 18,0.04) 0%, rgba(18, 18, 18,0.04) 55%,transparent 55%, transparent 100%),radial-gradient(circle at 76% 60%, rgba(110, 110, 110,0.04) 0%, rgba(110, 110, 110,0.04) 34%,transparent 34%, transparent 100%),radial-gradient(circle at 68% 56%, rgba(246, 246, 246,0.04) 0%, rgba(246, 246, 246,0.04) 16%,transparent 16%, transparent 100%),radial-gradient(circle at 71% 42%, rgba(156, 156, 156,0.04) 0%, rgba(156, 156, 156,0.04) 47%,transparent 47%, transparent 100%),radial-gradient(circle at 46% 82%, rgba(247, 247, 247,0.04) 0%, rgba(247, 247, 247,0.04) 39%,transparent 39%, transparent 100%),radial-gradient(circle at 50% 47%, rgba(209, 209, 209,0.04) 0%, rgba(209, 209, 209,0.04) 45%,transparent 45%, transparent 100%),linear-gradient(90deg, #e53949,#cc2232);\\n}\\n\\n.purple {\\n background-color: #8d3dae;\\n background-image: radial-gradient(circle at 47% 14%, rgba(205, 205, 205,0.04) 0%, rgba(205, 205, 205,0.04) 43%,transparent 43%, transparent 100%),radial-gradient(circle at 35% 12%, rgba(215, 215, 215,0.04) 0%, rgba(215, 215, 215,0.04) 4%,transparent 4%, transparent 100%),radial-gradient(circle at 1% 35%, rgba(24, 24, 24,0.04) 0%, rgba(24, 24, 24,0.04) 37%,transparent 37%, transparent 100%),radial-gradient(circle at 21% 1%, rgba(0, 0, 0,0.04) 0%, rgba(0, 0, 0,0.04) 26%,transparent 26%, transparent 100%),radial-gradient(circle at 23% 82%, rgba(249, 249, 249,0.04) 0%, rgba(249, 249, 249,0.04) 60%,transparent 60%, transparent 100%),radial-gradient(circle at 11% 54%, rgba(251, 251, 251,0.04) 0%, rgba(251, 251, 251,0.04) 23%,transparent 23%, transparent 100%),radial-gradient(circle at 69% 68%, rgba(234, 234, 234,0.04) 0%, rgba(234, 234, 234,0.04) 10%,transparent 10%, transparent 100%),linear-gradient(90deg, #8d3dae,#8d3dae);\\n}\\n.green {\\n background-color: #28a92b;\\n background-image: radial-gradient(circle at 46% 40%, rgba(228, 228, 228,0.06) 0%, rgba(228, 228, 228,0.06) 13%,transparent 13%, transparent 100%),radial-gradient(circle at 11% 41%, rgba(198, 198, 198,0.06) 0%, rgba(198, 198, 198,0.06) 19%,transparent 19%, transparent 100%),radial-gradient(circle at 52% 23%, rgba(14, 14, 14,0.06) 0%, rgba(14, 14, 14,0.06) 69%,transparent 69%, transparent 100%),radial-gradient(circle at 13% 85%, rgba(148, 148, 148,0.06) 0%, rgba(148, 148, 148,0.06) 44%,transparent 44%, transparent 100%),radial-gradient(circle at 57% 74%, rgba(232, 232, 232,0.06) 0%, rgba(232, 232, 232,0.06) 21%,transparent 21%, transparent 100%),radial-gradient(circle at 59% 54%, rgba(39, 39, 39,0.06) 0%, rgba(39, 39, 39,0.06) 49%,transparent 49%, transparent 100%),radial-gradient(circle at 98% 38%, rgba(157, 157, 157,0.06) 0%, rgba(157, 157, 157,0.06) 24%,transparent 24%, transparent 100%),radial-gradient(circle at 8% 6%, rgba(60, 60, 60,0.06) 0%, rgba(60, 60, 60,0.06) 12%,transparent 12%, transparent 100%),linear-gradient(90deg, #28a92b, #10a614);\\n}\\n\\nhtml, body {\\n margin: 0;\\n height: 100%;\\n font-family: \\\"Signika Negative\\\", sans-serif, Arial;\\n}\\n\\n\\n\\nbody {\\n\\/* overflow-x: hidden;\\n overflow-y: scroll; *\\/\\n}\\n\\nh1, h2, p, li {\\n max-width: 800px;\\n}\\n\\n\\/* HEADER *\\/\\nheader {\\n position: fixed;\\n top: 0px;\\n left: 0px;\\n padding: 6px 10px 10px 10px;\\n border-bottom-right-radius: 26px;\\n z-index: 100;\\n background-color: rgba(0,0,0,0.5);\\n}\\n\\n\\/* HEADINGS *\\/\\n.header-section {\\n padding: 0 15px;\\n text-align: center;\\n margin: 40vh auto 50vh;\\n}\\n\\n\\/* SCROLL DOWN *\\/ \\n.scroll-down {\\n position: absolute; \\n bottom: 30px;\\n left: 50%;\\n transform: translate(-50%, 0);\\n color: black;\\n font-weight: 400;\\n text-transform: uppercase;\\n font-size: 16px;\\n overflow: visible;\\n}\\n.scroll-down .arrow {\\n position: relative;\\n top: -4px;\\n margin: 0 auto;\\n width: 20px;\\n height: 20px;\\n background-image: url(data:image\\/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KPHBhdGggZmlsbD0iYmxhY2siIGQ9Ik00ODMuMiwxOTIuMmMtMjAuNS0yMC41LTUzLjUtMjAuOC03My43LTAuNkwyNTcsMzQ0LjFMMTA0LjUsMTkxLjZjLTIwLjItMjAuMi01My4yLTE5LjktNzMuNywwLjYKCWMtMjAuNSwyMC41LTIwLjgsNTMuNS0wLjYsNzMuN2wxOTAsMTkwYzEwLjEsMTAuMSwyMy40LDE1LjEsMzYuOCwxNWMxMy4zLDAuMSwyNi43LTQuOSwzNi44LTE1bDE5MC0xOTAKCUM1MDMuOSwyNDUuNyw1MDMuNywyMTIuNyw0ODMuMiwxOTIuMnoiLz4KPC9zdmc+);\\n background-size: contain;\\n}\\n\\n\\n\\nhtml, body {\\n -webkit-overflow-scrolling: auto;\\n overscroll-behavior: contain;\\n}\\nbody {\\n overflow: auto;\\n position: relative;\\n height: 100%;\\n}\\n\\nhtml {\\n position: fixed;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n}\\n\\n\\n.panel {\\n height: 100vh;\\n position: sticky;\\n top: 0;\\n}\\n\\n#masked {\\n -webkit-mask-image: url(https:\\/\\/d33wubrfki0l68.cloudfront.net\\/d319533ac3d22c3186498254e0caee871796a29e\\/d7ce9\\/images\\/css\\/masking\\/image-mask.png);\\n mask-image: url(https:\\/\\/d33wubrfki0l68.cloudfront.net\\/d319533ac3d22c3186498254e0caee871796a29e\\/d7ce9\\/images\\/css\\/masking\\/image-mask.png);\\n -webkit-mask-position: center center;\\n mask-position: center center;\\n -webkit-mask-repeat: no-repeat;\\n mask-repeat: no-repeat;\\n position: absolute;\\n top: 0px;\\n left: 0px;\\n width: 100%;\\n height: 100vh;\\n z-index: 0;\\n}\\n\\n.panel.grey {\\n background: grey;\\n}\\n\\n.panel.black {\\n background: black;\\n}\\n\\n.text {\\n position: absolute;\\n margin: auto;\\n font-family: \\\"Monument\\\";\\n font-size: 5vw;\\n opacity: 0;\\n color: white;\\n}\\n\\n\\nsection.content {\\n position: relative;\\n height: 100vh;\\n background-color: white;\\n color: #000;\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: space-around;\\n}\\n\\nsection.content2 {\\n position: relative;\\n height: 100vh;\\n color: #000;\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: space-around;\\n z-index: -1;\\n}\\n\\n.text1 {\\n color: #000;\\n z-index: 1;\\n}\\n\\n.playFirstVideo {\\n position: absolute;\\n background: #fdb813;\\n top: calc(100vh - 55%);\\n right: calc(100vw - 68%);\\n z-index: 1;\\n width: 100px;\\n height: 100px;\\n border-radius: 100%;\\n display: flex;\\n align-items: center;\\n align-content: center;\\n justify-content: center;\\n text-align: center;\\n z-index: 1000;\\n font-size: 15px;\\n}\\n\\n.playSecondVideo,\\n.playThirdVideo {\\n position: fixed;\\n background: #fdb813;\\n top: calc(100vh - 55%);\\n right: calc(100vw - 68%);\\n z-index: 1;\\n width: 100px;\\n height: 100px;\\n border-radius: 100%;\\n display: flex;\\n align-items: center;\\n align-content: center;\\n justify-content: center;\\n text-align: center;\\n z-index: 1000;\\n font-size: 15px;\\n z-index: 10;\\n opacity: 1;\\n}\\n\\n\\/***** VIDEO *****\\/\\n\\n#carbon {\\n position: absolute;\\n object-fit: cover;\\n z-index: -1;\\n left: 0;\\n top: 0;\\n}\\n\\n.dark-bg {\\n width: 100%;\\n float: left;\\n background: rgba(0, 0, 0, 0.4);\\n height: 100%;\\n position: absolute;\\n z-index: -1;\\n}\\n\\n#firstVideo {\\n width: 100%;\\n height: 100%;\\n float: left;\\n object-fit: cover;\\n}\\n\\n#secondVideo {\\n width: 100%;\\n height: 100%;\\n float: left;\\n object-fit: cover;\\n}\\n\\n#thirdVideo {\\n width: 100%;\\n height: 100%;\\n float: left;\\n object-fit: cover;\\n z-index: -1;\\n position: absolute;\\n}\\n\\n.content p {\\n font-size: 22.15px;\\n}\",\"js\":\"gsap.registerPlugin(ScrollTrigger);\\nconst sections = document.querySelectorAll(\\\"section\\\");\\n\\nconst special = gsap.timeline();\\nconst tl0 = gsap.timeline();\\nconst tl = gsap.timeline();\\nconst tl2 = gsap.timeline();\\nconst tl3 = gsap.timeline();\\nconst tl4 = gsap.timeline();\\n\\/*tl.to(\\\".special\\\", {\\n yPercent: -100\\n});*\\/\\n\\n\\/\\/special.fromTo(\\\".special\\\", { opacity: 1, y:0}, {opacity:1, y:-500, duration:2});\\ntl0.fromTo(\\\".text1\\\", { opacity: 0, y:-1000}, {opacity:1, y:0, duration:2});\\ntl.fromTo(\\\".text2\\\", { opacity: 0, y:-1000}, {opacity:1, y:0, duration:2});\\ntl2.fromTo(\\\".text3\\\", { opacity: 0, y:-1000}, {opacity:1, y:0, duration:2});\\ntl3.fromTo(\\\".text4\\\", { opacity: 0, y:-1000}, {opacity:1, y:0, duration:2});\\ntl4.fromTo(\\\".text5\\\", { opacity: 0, y:-1000}, {opacity:1, y:0, duration:2});\\n\\nfunction goToSection(i, anim) {\\n gsap.set(\\\"body\\\", {overflow: \\\"hidden\\\"});\\n \\n gsap.to(\\\"body\\\", {\\n scrollTo: {y: i*innerHeight, autoKill: false},\\n duration: 1.3,\\n overwrite: true,\\n onComplete: () => gsap.set(\\\"body\\\", {overflow: \\\"auto\\\"})\\n });\\n}\\n\\n\\ngsap.utils.toArray(\\\".panel\\\").forEach((panel, i) => {\\n \\n \\n \\n ScrollTrigger.create({\\n trigger: panel,\\n onEnter: () => goToSection(i)\\n });\\n \\n ScrollTrigger.create({\\n trigger: panel,\\n start: \\\"bottom bottom\\\",\\n onEnterBack: () => goToSection(i)\\n });\\n \\n \\n \\nScrollTrigger.create({\\n trigger: \\\".red\\\",\\n toggleActions: \\\"play reverse restart reverse\\\",\\n animation:tl,\\n scrub:false,\\n pin:false,\\n \\n });\\n \\n ScrollTrigger.create({\\n trigger: \\\".orange\\\",\\n toggleActions: \\\"play reverse restart reverse\\\",\\n animation:tl2,\\n scrub:false,\\n pin:false,\\n \\n });\\n \\n ScrollTrigger.create({\\n trigger: \\\".purple\\\",\\n toggleActions: \\\"play reverse restart reverse\\\",\\n animation:tl3,\\n scrub:false,\\n pin:false,\\n \\n });\\n \\n ScrollTrigger.create({\\n trigger: \\\".green\\\",\\n toggleActions: \\\"play reverse restart reverse\\\",\\n animation:tl4,\\n scrub:false,\\n pin:false,\\n \\n });\\n \\n});\\n\\n\\ngsap.utils.toArray(\\\".special\\\").forEach((special, i) => {\\n \\n \\n\\n \\n});\\n\\n\\n\\/\\/gsap.set(\\\".special\\\", { zIndex: (i, target, targets) => targets.length - i });\\n\\n\\n\\n\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2022-07-07T22:28:44.751Z\",\"updated_at\":\"2022-07-08T13:56:27.777Z\",\"title\":\"Scrolltrigger snap test\",\"description\":\"\",\"slug_hash\":\"qBoZbwg\",\"head\":\"\",\"private\":true,\"slug_hash_private\":\"03bae1287c38758715b2151b016a43a3\",\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"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\":\"0181dac7-a04f-74e8-90a5-bfde4d2f9f8e\",\"is_new_editor_pen\":false,\"pen_hash\":null,\"hashid\":\"qBoZbwg\"}"}