Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
c05dk

gsap logo animation

Recommended Posts

I am trying to animate my logo so that it is drawn, can this be done? All that is happening is that an outline is being drawn outside it.

 

 

See the Pen PowWKVm by dalkhosa (@dalkhosa) on CodePen

Share this post


Link to post
Share on other sites

Hey c05dk and welcome to the GreenSock forums!

 

It's definitely possible to animate your logo so that it is drawn. However, DrawSVG works solely with outlines because it can't use the same methodology on SVG elements that have a fill. So you should look into animating a mask like these posts suggest:

P.S. Keep in mind that DrawSVGPlugin is a Club GreenSock feature. 

  • Like 2

Share this post


Link to post
Share on other sites

I am new to this, I have created the svg but in terms of creating the mask could you assist with this?

 

Thanks

Share this post


Link to post
Share on other sites

How to create the mask depends on the program you're using to create the SVG. If you know how to create a mask in the program you're using, you just have to make sure it covers the your logo as closely as possible but is a single path. Then once you have the mask you animate it using GSAP to reveal the logo.

 

Creating the mask is not related to GSAP so you may not get a thorough answer here. You can learn some about SVG creation in our thread on SVG Gotchas:

 

There are also other sites like GraphicDesign.StackExchange that can help in more detail with asset creation like masks. Make sure to include your attempts and where you're stuck in the question if you post there :) 

Share this post


Link to post
Share on other sites
3 hours ago, c05dk said:

I am new to this, I have created the svg but in terms of creating the mask could you assist with this?

 

In the thread I posted above @PointC goes into various nuances about creating SVG masks for this sort of thing. See his post in this comment and also these links for a two part tutorial of his. If needed you can copy the SVG code from those examples, save it as an SVG file, then open it in a vector program to visually comprehend what is going on with the SVG setup better. I think those two links from the thread posted above should help you with your asset creation efforts and understanding.

 

 

  • Like 3

Share this post


Link to post
Share on other sites

Hey @c05dk,

 

Welcome to the GreenSock Forum.

 

The explanations and examples of @PointC (see links above) are great.
Here is another example of using svg masks.

 

See the Pen RwNKBrB by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×