Jump to content
Search Community

Newbie trying to get DrawSVG Plugin working

katerina Solstad test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Thanks for the demo. In cases like this where a single tween on a single element isn't working I like to get rid of everything that isn't related to the problem, so I removed everything but the #wTop element. When dealing with an SVG its pretty much impossible to know what #wTop looks like if theres a dozen other things in there.

 

With everything else removed I saw that the svg was completely blank.

I then noticed that you had visibility:hidden set in the css

 

  #wTop{
      visibility: hidden;
  }

 

 

I suspect that perhaps you wanted the path to be hidden before the javascript runs, so I added this to your js to make the path visible

 

TweenLite.set("#wTop", {visibility:"visible"});

 

 

Once the path was visible it made sense that there would not be any animation with the js you had

 

TweenLite.to("#wTop",1,{drawSVG:"100%"})

 

A stroke naturally shows at 100% so tweening it to 100% isn't going to show anything changing.

 

If you want the stroke to reveal itself try you need to set the start value at 0. a fromTo() tween works well for this

 

TweenLite.fromTo("#wTop",5,{drawSVG:"0%"}, {drawSVG:"100%"})

 

 

 

See the Pen bvZjME?editors=1010 by GreenSock (@GreenSock) on CodePen

 

 

 

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

36 minutes ago, Carl said:

Thanks for the demo. In cases like this where a single tween on a single element isn't working I like to get rid of everything that isn't related to the problem, so I removed everything but the #wTop element. When dealing with an SVG its pretty much impossible to know what #wTop looks like if theres a dozen other things in there.

 

With everything else removed I saw that the svg was completely blank.

I then noticed that you had visibility:hidden set in the css

 


  #wTop{
      visibility: hidden;
  }

 

 

I suspect that perhaps you wanted the path to be hidden before the javascript runs, so I added this to your js to make the path visible

 


TweenLite.set("#wTop", {visibility:"visible"});

 

 

Once the path was visible it made sense that there would not be any animation with the js you had

 


TweenLite.to("#wTop",1,{drawSVG:"100%"})

 

A stroke naturally shows at 100% so tweening it to 100% isn't going to show anything changing.

 

If you want the stroke to reveal itself try you need to set the start value at 0. a fromTo() tween works well for this

 


TweenLite.fromTo("#wTop",5,{drawSVG:"0%"}, {drawSVG:"100%"})

 

 

 

See the Pen bvZjME?editors=1010 by GreenSock (@GreenSock) on CodePen

 

 

 

 

 

Thank you so much! Thank you for explaining it as well as fixing. I feel like I should be paying extra for all this help I receive. Greatly appreciated. I have a question about having other paths and running only one or two of them with DrawSVG plugin. So it is not doable? Let's say I have a big scene done with many paths but would like to animate with drawSVG only a few of them, The other ones I would like to be having different tweens using different plugins. It is not possible? Or I need to be placing them in different groups or divs? Thank you again for your time and effort to help me. I have artistic ideas ( being a visual artist) and learning programming and front web developing with animation to execute those ideas. So I am very new to it. Started in February this year. 

Link to comment
Share on other sites

You're welcome.

 

Sure, you can have an SVG and only animate the paths you want. The paths that get animated are chosen based on the selector you use.

In your case you used an ID to select your path, but you can use a class. Perhaps try something like put a class of "animate" on the paths you want to animate and then do

 

TweenLIte.to(".animate", 1, {drawSVG:"0%"}); //will animate every path with a class of animate

 

or you can put a class on a group and target only the paths in that group

Notice how only the paths in the "#tops" group get animated:

 

See the Pen PRLyja?editors=1010 by GreenSock (@GreenSock) on CodePen

 

 

A simple request: In the future try not to quote the entire message that you are replying to. It makes the content of the threads much longer and more difficult to read and scroll through. In longer conversations with more participants its can be helpful to quote small fragments. Thanks!

 

 

 

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

It looks like you did fine in your previous comment. If you just type in the response field at the bottom of the thread, you shouldn't have to delete anything.

 

https://greensock.d.pr/yejiHN

 

Are you saying that the quoted messages are automatically showing up in your reply  when you reply at bottom. I just want to make sure the system isn't doing something wrong. 

Link to comment
Share on other sites

This says "reply to this topic". To my thinking that would mean to reply to the topic I posted. Since when I reply I am thinking of replying to the response someone wrote to my topic the option "reply to the topic" feels not exactly correct. That is why I would choose to push button "quote" at least to make sure that I am replying to another person who wrote that quote. The only thing I did not realize that I can shorten that quote by deleting some of it's content. I believe that system works as it should, it is me seeing the meaning of words that I read did not match the intended meaning. 

  • Like 3
Link to comment
Share on other sites

Thanks so much for the clarification. Now I see where the confusion was. "Reply to topic" just allows your reply to be the next chronological response in the conversation. I suspect some other forums may work differently. No worries. glad its sorted.

 

Link to comment
Share on other sites

There are some forums where you have one "initial topic" and you can reply to it, or you can reply to the replies, or to the replies of replies, etc. and it creates a "tree" structure, a bit like reddit or facebook comments.

 

However in other forums such as this one, "topic" (or thread) just means "one individual conversation" and adding a reply to it just means adding your comment to the end of that conversation.

 

It can be confusing :P

  • Like 1
  • Thanks 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...