Jump to content
Search Community

drawSVG, trying to make something simple but nothing happen

blippar test
Moderator Tag

Go to solution Solved by Carl,

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

Just one more question :

 

is it possible to really "draw" the svg ? I mean. This is a drop about to fall, it is possible to draw the curve then the line then bottom ?

 

Or do you expect too much from svg animation haha ? cuze I saw that a lot of time dev played only with the size of the svg..

Link to comment
Share on other sites

Sorry, I'm not really understanding your followup question.

 

DrawSVGPlugin allows you to control how any stroke on an SVG element is revealed. No more, no less.

 

With our timeline tools you can create many tweens that use DrawSVG to animate multiple paths and schedule them to run at any time in any order.

 

http://codepen.io/GreenSock/pen/jEEoyw

http://codepen.io/GreenSock/pen/BNBYrg

 

Perhaps you can rephrase your question or provide some sort of visualization / demo.

Link to comment
Share on other sites

If I understood correctly you want something like this?:

 

http://giphy.com/gifs/water-drop-YDH4R2UFc14uk

 

If so you need to modify the SVG paths and the Draw SVG Plugin just works on a defined path not a dynamic one. That is a different story as you can see in this codepen by Elliot:

 

See the Pen AkBre by pyrografix (@pyrografix) on CodePen

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...