Jump to content
GreenSock

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

interactive svg paths

Go to solution Solved by GreenSock,

Recommended Posts

Hello guys,

 

I am looking for a way to add interactivity with bezier control points and handles to svg paths.

Similar to MotionPathHelper functionality, though the .create method breaks on closed shapes and the .editPath method opens up the paths.

The Ease Visualizer/Custom is also a good example.

 

Additionally, what would be the best way to store each onDrop state ( in say MotionPathHelper).

 

Cheers

Link to comment
Share on other sites

  • tailbreezy changed the title to interactive svg paths

This example is not GSAP related but I found it interesting, maybe it could help your efforts in some way. ¯\_(ツ)_/¯

 

See the Pen xNKGQW by giaco (@giaco) on CodePen

 

  • Like 3
Link to comment
Share on other sites

Thank you, Shrug. This is a very nice example.

Link to comment
Share on other sites

It's always good to check what features do you need (and what the chosen javascript library can provide). I posted a message about using D3.js built-in tween animation instead of hardening the task by using GSAP etc.

 

Here you might go with Paper.js that will show you interactive handles for Bezier control points simply with setting a configuration parameter:

 

path.fullySelected = true;

 

The well-known example (quoted several time in GSAP forums) is easy to study:

 

http://paperjs.org/examples/smoothing/

 

With Paper.js it's possible to create advanced animations on canvas. Here's an idea of an audio visualizer:

 

https://www.dropbox.com/s/dvll53kvxe3r42v/audio-viz-fog-filter-mattsrinc.mp4?dl=0

 

I cannot reveal a source code (and the URL in the video is not valid anymore) yet for sharing the knowledge here's a tip - with canvas you can draw a graphical element outside (e.g. translated) the visual display on screen yet translate its shadow (e.g. effect) back to screen coordinates. That's how the shadow filter was done for Paper.js repeated and delayed&animated paths for audio spectrum above.

  • Like 1
Link to comment
Share on other sites

4 hours ago, mattsrinc said:

Paper.js that will show you interactive handles for Bezier control points simply with setting a configuration parameter: path.fullySelected = true;

 

I considered suggesting Paper.js also, though the fullySelected is more just for presentation isn’t it? For interaction functionality don't you actually need hitTest event logic, etc., ?

 

https://d19jftygre6gh0.cloudfront.net/lehni/a665d6f9d95dd055b0ff901f8e313780

https://d19jftygre6gh0.cloudfront.net/lehni/9aa7d593235f04a3915ac4cef92def02

 

 

 

 

  • Like 1
Link to comment
Share on other sites

  • Solution
16 hours ago, tailbreezy said:

the .editPath() method opens up the paths.

I just updated MotionPathHelper to better handle closed paths in the way you'd probably expect - please give the preview a shot and let me know if it works well for you: 

https://assets.codepen.io/16327/MotionPathHelper.min.js (only works on CodePen)

 

FYI, I noticed the other recommendations folks provided here don't have some of the features MotionPath does like:

  • Support for touch devices (kind of a big deal these days)
  • SHIFT-select multiple anchors
  • Drag the entire path
  • ALT-click anchor to toggle smooth/corner

Also, there are some callbacks you can tap into for onPress, onRelease and onUpdate (which is called every time the path gets updated, so that's a LOT while dragging):

MotionPathHelper.editPath("#test", {
	onPress: () => console.log("pressed"),
	onRelease: () => console.log("released"),
	onUpdate: () => console.log("updated")
});

So if you want to do some kind of saving of the state, you could do so in an onRelease. 

 

Anyway, hopefully MotionPathHelper helps in some way ;)

 

Enjoy!

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

7 hours ago, mattsrinc said:

With Paper.js it's possible to create advanced animations on canvas.

 

Thank you for suggesting paper, mattsrinc. 

I have actually already came across paper and was considering it, if I were to build something from scratch. I was afraid that I would have to write quite a lot of logic to handle the scenarios Jack listed (which I need, because they are the main point).

 

2 hours ago, Shrug ¯\_(ツ)_/¯ said:

I considered suggesting Paper.js also, though the fullySelected is more just for presentation isn’t it? For interaction functionality don't you actually need hitTest event logic, etc., ?

 

Thank you again, Shrug. Both examples are pretty great.

 

17 minutes ago, GreenSock said:

FYI, I noticed the other recommendations folks provided here don't have some of the features MotionPath does like:

  • Support for touch devices (kind of a big deal these days)
  • SHIFT-select multiple anchors
  • Drag the entire path
  • ALT-click anchor to toggle smooth/corner

 

Oh, wow, Jack! :) Thank you for the closed paths fix. 

The four bullets listed were indeed what I was looking for when I started searching for the best tool to handle my very small but specific situation. I will probably be using svgs with just a handful of control points, so animating actual svgs would be fine and even preferable.

 

So simple. Love it :) 

17 minutes ago, GreenSock said:

MotionPathHelper.editPath("#test", { onPress: () => console.log("pressed"), onRelease: () => console.log("released"), onUpdate: () => console.log("updated") });

 

 

  • Like 2
Link to comment
Share on other sites

8 hours ago, Shrug ¯\_(ツ)_/¯ said:

 

I considered suggesting Paper.js also, though the fullySelected is more just for presentation isn’t it? For interaction functionality don't you actually need hitTest event logic, etc., ?

 

https://d19jftygre6gh0.cloudfront.net/lehni/a665d6f9d95dd055b0ff901f8e313780

https://d19jftygre6gh0.cloudfront.net/lehni/9aa7d593235f04a3915ac4cef92def02

 👌 I would suggest these links next, thanks (was a late hour).

Link to comment
Share on other sites

6 hours ago, GreenSock said:

I just updated MotionPathHelper

Nice @GreenSock, I had a notion that you would “whip up” something, GSAP native is always the best. 😃

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

×