Some MAGIC Happening

\r\n

\r\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, quae in? Dicta numquam minima similique, officiis dolorum vero? Officiis illo aliquam ratione, labore dolore error aperiam minima exercitationem accusantium sapiente.\r\n

\r\n

\r\n SECTION\r\n

","css":"/* */\r\n@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');\r\n\r\nbody {\r\n margin: 0;\r\n padding: 0;\r\n background-color: white;\r\n font-family: 'Poppins', sans-serif;\r\n}\r\n\r\nsection {\r\n height: 100vh;\r\n display: grid;\r\n place-content: center;\r\n text-align: center;\r\n font-size: 4rem;\r\n}\r\n\r\n.s2 {\r\n max-width: 700px;\r\n}\r\n\r\n.s2 span {\r\n color: hsl(0 0% 100%/ 0.2);\r\n background-size: 0% 100%;\r\n background-repeat: no-repeat;\r\n background-image: linear-gradient(90deg, white, white);\r\n background-clip: text;\r\n -webkit-background-clip: text;\r\n animation: scroll-reveal linear forwards;\r\n animation-timeline: view(y);\r\n font-family: \"Poppins\", BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\r\n}\r\n\r\n.s2 h1 span {\r\n animation-range-start: contain 20vh;\r\n animation-range-end: contain 30vh;\r\n font-size: 3rem;\r\n /* line-height: 0px; */\r\n\r\n}\r\n\r\n.s2 p span {\r\n animation-range-start: contain 30vh;\r\n animation-range-end: contain 50vh;\r\n font-size: 1rem;\r\n}\r\n\r\n@keyframes scroll-reveal {\r\n to {\r\n background-size: 100% 100%;\r\n }\r\n\r\n}\r\n\r\n.w {\r\n background-color: black;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.s2 h1 {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.s2 p {\r\n margin: 1px;\r\n padding: 0;\r\n}","js":"// ","user_id":"24c8783e-8cfd-47f1-ac9f-ac9a07eeaa73","project_key":"5i0sc6","description":"Text Scroll Reveal Animation With CSS Only","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":false,"materialicons":false,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"motionone":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "cssProcessor": false},"tags":["scroll","text","animation"],"hide_js":false,"hide_css":false,"messages":[],"view":[{"views":472}],"profiles":{"username":"nuur"}}]