stemolti Posted February 5 Share Posted February 5 (edited) Hi everyone! I'm working on a landing page and I need to create a pre-loader that uses my handwritten logo as an SVG. Desired effect: The desired effect is a Stroke Reveal, implemented with GSAP3. How can I achieve this effect? Logo positioning: After loading, the logo/preloader should be positioned centrally on the navbar. Request for help: To achieve this project, I would need your help. What should I study? Best practices? What resources and tutorials do you recommend to learn more about?: Creating pre-loaders Stroke Reveal effect with GSAP3 Dynamic positioning of SVG elements What can I get inspiration from? Do you have any examples of websites or projects that use similar effects? Conclusion: Thank you in advance for your support! Additional information: I'm using GSAP3 My logo is a handwritten SVG The landing page is developed in HTML, CSS and JavaScript Thank you very much for your help! Edited February 5 by stemolti I needed to add my logo image Link to comment Share on other sites More sharing options...
ryan_labar Posted February 5 Share Posted February 5 Hi @stemolti, And welcome to the GSAP forums! This page is a good starting point: https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/ Some inspiration here: https://codepen.io/collection/DYmKKD?grid_type=grid Note: The DrawSVG plugin isn't required to create the effect you're looking for, but it makes it really simple, as it does all the complex SVG stroke calculations for you, which is well worth it, IMO. 2 Link to comment Share on other sites More sharing options...
stemolti Posted February 5 Author Share Posted February 5 Ok, but for how much time I have the trial? Link to comment Share on other sites More sharing options...
Cassie Posted February 5 Share Posted February 5 The trial isn't time-based. It's domain specific. So you can use the trial plugins for as long as you like, but only locally and on sites like codepen. https://gsap.com/resources/trial/ Hope that helps! 4 Link to comment Share on other sites More sharing options...
PointC Posted February 5 Share Posted February 5 A couple tutorials which may help. https://www.motiontricks.com/animated-handwriting-effect-part-1/ https://www.motiontricks.com/animated-handwriting-effect-part-2/ Other helpful info. https://www.motiontricks.com/cut-your-path-start-points-in-adobe-illustrator/ https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/ https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ Happy tweening. 3 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now