Jump to content
Search Community

Using drawSVG to Dynamic points

phillip_vale 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

Hi all,

 

Trying to animate a line between 2 random points inside a circle using drawSVG. That is the end result i am hoping for.

 

But this is a learning experience so doing it bit by bit.

 

However, i am now stuck. I can make the points appear (currently limited to 2) but would like to animate them in on the pointsTL timeline rather than using the pointer.appendTo("#circle").fadeIn(x);.

 

I put an example in the top left to show what i am trying to achieve but happy for direction to get back on track at the moment in terms of setting up the gsap timeline.

 

Any help is appreciated!

 

Phil

See the Pen beerNe?editors=0011 by phillip_vale (@phillip_vale) on CodePen

Link to comment
Share on other sites

Just make an array of lines. It's not going to get much easier than this.

See the Pen a4e23685390527c20155ac3bbd1f2f08?editors=0010 by osublake (@osublake) on CodePen

 

For something more advanced, you can use a single path and calculate the distances between each point.

See the Pen d8f22fce19e7a54d4eeba4a114a10998?editors=0010 by osublake (@osublake) on CodePen

 

That's pretty much the same method I used to create these SVG stroke recorders.

Demo 1 -

See the Pen dGwZBx by osublake (@osublake) on CodePen

Demo 2 -

See the Pen Bzamom by osublake (@osublake) on CodePen

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