Creating a pre-loader with GSAP3 Stroke Reveal effect

[stemolti]

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, 2024 by stemolti
I needed to add my logo image

[ryan_labar]

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.

[stemolti]

Ok, but for how much time I have the trial?

[Cassie]

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!

[PointC]

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.