Jump to content
GreenSock

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

Troubles with .set()

Recommended Posts

so i am trying to put together an animation wherein the writing is being drawn out.

I have all the SVG done, with each letter being composed of multiple strokes, but I immediately have gotten stuck trying to set properties with GSAP and the drawSVG plugin. 

 

If anybody might be able to help me it would be much appreciated, thanks!

See the Pen NgBGyB?editors=1011 by Leviathan_The_Great (@Leviathan_The_Great) on CodePen

Link to comment
Share on other sites

There are multiple issues with your svg and demo,

 

1. You need drawSVG plugin to draw paths, you were also using really old version of TweenMax. DrawSVG plugin is part of club membership but on codepen you can use drawSVG plugin for free to practice and learn.

2. You don't need to manually use document.querySelector, GSAP uses it internally so you can just pass your query string.

3. DrawSVG plugin only draws paths, some of your paths seem to have no stroke and only has fill so it appears they are not being drawn.

4. Your svg elements seems to be using inline transforms which can cause issues in some cases, please take a look at SVG gotchas thread.

 

Also, manually chaining each path might make it hard to make changes in future, you can use stagger tweens to achieve same effects.

 

See the Pen ERjOKB?editors=0110 by Sahil89 (@Sahil89) on CodePen

 

Also take a look at couple of great posts on how to do handwriting effect by @PointC

  • Like 3
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.
×