Jump to content
Search Community

Creating a pre-loader with GSAP3 Stroke Reveal effect

stemolti test
Moderator Tag

Recommended Posts

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?


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 by stemolti
I needed to add my logo image
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...