The latest articles on DEV Community by Stefano (@stemolti). https://dev.to/stemolti https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1273648%2Fab3db7a5-c4e7-42fd-90c7-8a753834e7dc.jpg https://dev.to/stemolti en Stefano Mon, 05 Feb 2024 15:43:51 +0000 https://dev.to/stemolti/creating-a-pre-loader-with-gsap3-stroke-reveal-effect-1d0b https://dev.to/stemolti/creating-a-pre-loader-with-gsap3-stroke-reveal-effect-1d0b <p>Hi everyone!</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi4klbjpnd6j4ptku42ep.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi4klbjpnd6j4ptku42ep.jpg" alt="Image description" width="521" height="521"></a><br> I'm working on a landing page and I need to create a pre-loader that uses my handwritten logo as an SVG.</p> <p>*<em>Desired effect:<br> *</em><br> The desired effect is a Stroke Reveal, implemented with GSAP3.</p> <p>How can I achieve this effect?</p> <p>*<em>Logo positioning:<br> *</em><br> After loading, the logo/preloader should be positioned centrally on the navbar.</p> <p>*<em>Request for help:<br> *</em><br> To achieve this project, I would need your help.</p> <p>What should I study? Best practices?</p> <p>What resources and tutorials do you recommend to learn more about?:</p> <ul> <li>Creating pre-loaders</li> <li>Stroke Reveal effect with GSAP3</li> <li>Dynamic positioning of SVG elements</li> </ul> <p>What can I get inspiration from?<br> Do you have any examples of websites or projects that use similar effects?</p> <p>Conclusion:</p> <p>Thank you in advance for your support!</p> <p>*<em>Additional information:<br> *</em></p> <ul> <li>I'm using GSAP3</li> <li>My logo is a handwritten SVG</li> <li>The landing page is developed in HTML, CSS and JavaScript</li> </ul> <p>Thank you very much for your help!</p> frontend css javascript gsap