Vanilla GSAP ScrollTrigger

[{"id":"ecb6c93b-c60f-4bd3-a380-4c250943f55d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"577fed3a-1835-40d2-bce5-d08fc9d622e7","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"@font-face {\\n font-display: block;\\n font-family: Mori;\\n font-style: normal;\\n font-weight: 400;\\n src: url(https://assets.codepen.io/16327/PPMori-Regular.woff) format(\\\"woff\\\");\\n}\\n\\n:root {\\n --color-shockingly-green: #0ae448;\\n --color-just-black: #0e100f;\\n --color-surface-white: #fffce1;\\n --color-pink: #fec5fb;\\n --color-shockingly-pink: #f100cb;\\n --color-orangey: #ff8709;\\n --color-lilac: #9d95ff;\\n --color-lt-green: #abff84;\\n --color-blue: #00bae2;\\n --color-grey: #191919;\\n --color-surface75: #bbbaa6;\\n --color-surface50: #7c7c6f;\\n --color-surface25: #42433d;\\n}\\n\\nbody {\\n font-family: Mori;\\n font-weight: 300;\\n margin: 0;\\n padding: 0;\\n background: #0e100f;\\n}\\n\\n.main-tool-bar {\\n height: 80px;\\n background: linear-gradient(\\n 144.02deg,\\n var(--color-blue) 4.56%,\\n var(--color-pink) 72.98%\\n );\\n color: #0e100f;\\n text-align: center;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n\\n position: fixed;\\n width: 100%;\\n left: 0;\\n top: 0;\\n transition: ease 0.4s;\\n &--scrolled {\\n height: 40px;\\n }\\n}\\n\\n.scrollable-area {\\n height: 200vh;\\n}\\n\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n Vanilla GSAP ScrollTrigger\\n \\n\\n \\n \\n\\n \\n \\n\\n\\n\\n\\n

Header

\\n

\\n\\n\\n\\n\\n\\n\\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"const showAnim = gsap.from('.main-tool-bar', { \\n yPercent: -100,\\n paused: true,\\n duration: 0.2\\n}).progress(1);\\n\\nScrollTrigger.create({\\n start: \\\"top top\\\",\\n end: \\\"max\\\",\\n // markers: true,\\n onUpdate: (self) => {\\n self.direction === -1 ? showAnim.play() : showAnim.reverse()\\n }\\n});\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.html","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"70aa13e3-a744-40bd-b267-a91271d6ca84","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"efef0680-bcba-47a0-8a6d-d1473a7e1bec","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"/head","styles":{}}],"children":[]},{"id":"bdf67952-372e-416d-8225-c4cac54f257e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"dadwada","styles":{}}],"children":[]},{"id":"1982bb26-4659-47bb-ab87-8b1e644a3a8a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"18fe01ce-7e3c-4550-97de-9028d098503d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"df82011f-3ff7-4aac-a9e8-7ff7465feeb4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]