Jump to content
GreenSock

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

Getting control points of a wave svg and use it

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

I've look through several methods and the forum but can't seem to still wrap my idea about manipulating the svg.

Without using MorphSVG plugin, is there a way to control a specific point of my wave svg path to move upwards and downwards. See the red dots in both attached image.

Do I really need a library like Snap.svg or something to convert them into data?

I know you can change the path d attribute. Thus my very first try was to grab two different svg and change the d attributes

 

But all I get is jibberish movements. See codepen for example.



 

post-48682-0-55736500-1481707093_thumb.png

post-48682-0-47567200-1481707094_thumb.png

See the Pen ENdOZy by nickngqs (@nickngqs) on CodePen

Share this post


Link to post
Share on other sites

Yes you can achieve such effects without a JS library, it's more about knowing how the path is drawn in order to manipulate it.

 

I'm AFK all day today but if no one's shown you how by the time I get back, I'll show you.

Share this post


Link to post
Share on other sites

Hello Buntafujiwaaa!

 

I'm back. It seems no one's been here or said anything so the glory shall be all MINE!

 

As I mentioned before, if you want to manipulate the path in SVG without using DrawSVG (or another specific library), you will have to learn to read the actual path code. Why? Because half of what DrawSVG (and any other library) does is read the code int that attribute. The other half is to write another load of code.

 

Granted, for complex shapes it's very, very, very hard - We wouldn't need all the plugins and JS libraries if it wasn't, right?

 

Onwards to the main act: 

 

The reason just grabbing two different SVGs and combining their paths generate gibberish motion is because they are two different SVGs. The code that makes their paths will be different because they were created differently (I could go into a bend here over chaos theory but, let's not...).

 

If you are able to read the path code then you will be able to alter it just so, and achieve the desired effect.

 

Here's MDN's info on path. And here's w3chool's one.

 

If we look at the code that's in your Pen, clipping it to just a tiny section, more precisely the very first point in the drawing. Bear in mind the viewBox size being 1440 wide by 240 height.

 

Original shape:

M329.8,0

This reads: Move to position 329.8 in the horizontal axis and position 0 in the vertical axis.

 

Target shape:

M1440,100

This reads: Move to position 1440 in the horizontal axis and position 100 in the vertical axis.

 

In the original shape the point is quite close to the top left of the SVG. In the target shape the equivalent point is very close to the bottom right corner. When you use GSAP to tween just that one point, it will look like it is traveling from the top left to the bottom right. Now, extrapolate that into all the points in your shape and you will get what you see in your Pen.

 

In another words, that's expected behaviour. ;)

 

Here's a Pen I put together, it shows how little you need to create a decent simple shape and what you need to change to make it move, I have kept it with as little points as possible and as close as your original.

 

See the Pen jVQWJm by dipscom (@dipscom) on CodePen

 

Happy Tweening!

  • Like 5

Share this post


Link to post
Share on other sites

OMG, that makes so much sense now! Your explanation is really good as compared to other svg material I've been reading. Thanks alot!

  • Like 1

Share this post


Link to post
Share on other sites

 

OMG, that makes so much sense now! Your explanation is really good as compared to other svg material I've been reading. Thanks alot!

 

The reason just grabbing two different SVGs and combining their paths generate gibberish motion is because they are two different SVGs. The code that makes their paths will be different because they were created differently

Your first two line got me thinking 'why am i so stupid, there're two different svgs =X'

Share this post


Link to post
Share on other sites

Don't put yourself down, we're all at different levels with different subjects in life ;)

 

There's no such thing as stupid here, just inexperienced. 

 

Happy to hear that it makes sense, I can be a bit convoluted when explaining things sometimes.

  • Like 2

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×