Es-her

How do I know the coordinates?

Recommended Posts

Hi, I am brand new to SVG animation and need help. I have an svg of the USA and am trying to make arrows shoot out of NJ and to all other states. I have the arrows on the states and am using TweenMax.from($("#TX"), 3, {x:220,y:-150}); to make them animate to their final destination. My x and y coordinates are off. Is there an easier way than trial and error to get the precise coordinates of x and y for each arrow? My method of trying different coordinates and nudging them would take me hours to do for 50 states. Also, after they move I want to make them fadeout and then loop. HOw do I chain events? Like first move, then change opacity and then repeat?  Any help would be greatly appreciated. Thanks

Share this post


Link to post
Share on other sites

Nice one Blake.

 

There's always the possibility that other mortals or non-matrix dwelling entities might want to achieve a similar result. :P

 

If you are like myself, Es-her, you can cheat and get a similar result by adjusting the SVG a bit, nest a few elements and a single tween will get you to places.

 

Like this: http://codepen.io/dipscom/pen/KgWbga

 

If ever in doubt of what to do, just follow Blake's advice. ;)

  • Like 2

Share this post


Link to post
Share on other sites

I have to ask, what is leaving New Jersey and spreading across the US? Reminds me of a South Park episode.

 

To understand coordinates, it helps to know a little trigonometry. You should at least be familiar with finding the distance between 2 points (Pythagorean theorem) and finding the angle between 2 points (arctangent).

 

Assume you have two points like this. 

var p1 = { x: 100, y: 200 };
var p2 = { x: 150, y: 500 };

First you need the find the difference between those 2 points. Sometimes this is referred to as delta.

var dx = p2.x - p1.x;
var dy = p2.y - p1.y;
 

Now you can you use the Pythagorean theorem to figure out the distance. (c2 = a2 + b2).

var dist = Math.sqrt(dx * dx + dy * dy);

To figure out the angle, you can use JavaScript's arctangent function, Math.atan2. Note that dy is the first parameter.

var angle = Math.atan2(dy, dx);

This returns the angle in radians. Depending on the orientation of what you're rotating, you may need to subtract 90 degrees from it, which would be pi/2 for radians.

 

var angle = Math.atan2(dy, dx) - (Math.PI / 2);

To convert radians to degrees, you can do this.

var angleInDegrees = angleInRadians * 180 / Math.PI;

Note that you don't have to use degrees in a tween. GSAP will use radians if you append a "rad" string to the angle.

TweenLite.to(".foo", 1, { rotation: angleInRadians + "rad" }); 
 

If you notice that angle is reversed, try switching switching the order in the delta calculation. Above, I did p2 - p1, but you might need to do p1 - p2.

 

To chain animations, you should use a timeline. Please check out this link.

http://greensock.com/position-parameter

 

And here's a demo using some of these techniques. Click around the screen to make an arrow move to that point. You could also use the BezierPlugin to do this, but it's good to know how to do it this way.

http://codepen.io/osublake/pen/0f4374b37ac5058ef8154efd2a1c0b30?editors=0010

 

.

  • Like 3

Share this post


Link to post
Share on other sites

I have no idea what happened to the formatting, so I had to delete my post. 

 

Dipscom, your animation isn't working.

Share this post


Link to post
Share on other sites

Sorry, I was meddling with it. I have a couple of things I wanted to test. Might fork it to try later.

 

I'll stop now.  :?

Share this post


Link to post
Share on other sites

Ok. I noticed in your Bezier that you only had 1 point, but you need at least 2 for the default type. You can get the non-transformed bounding box on an SVG element like this.

var bbox = myElement.getBBox();

That will return an object with the following properties - x, y, width, and height. You could use that object to get the coordinates for your Bezier. And the BezierPlugin has autoRotate, so you don't need to do any angle calculations.

  • Like 2

Share this post


Link to post
Share on other sites

That's what I was messing around with. Seeing how to the bezier plugin worked with SVG and testing autoRotate.

Share this post


Link to post
Share on other sites

Ok, you can tell that I have spent most of my Sunday at home, yes?

 

I have finished tinkering with this idea. It's got my trademark cheating style of getting GSAP to do most of the math and editing the SVG to suit my needs. 

 

http://codepen.io/dipscom/pen/BLWEoa

 

The only issue I see in my testing is that the out bit of the ease is rather janky... No idea why. The in part of it is fine. It happens in all the browsers I have tested (Firefox, Chrome, Edge, IE, Safari, Opera)...

 

:/ 

  • Like 3

Share this post


Link to post
Share on other sites

Thanks for all the responses, I will try them out and see if I can make it work like I want.  OSUblake, the graphic is for a demo company in NJ that will travel to any state for a job. I am no trigonometry whiz but I will try to follow your steps. I was just wondering, do you know if there is an easier way to animate svgs, say with an Adobe program such as Animate CC or is this the best way to animate svgs?

Share this post


Link to post
Share on other sites

I was just wondering, do you know if there is an easier way to animate svgs, say with an Adobe program such as Animate CC or is this the best way to animate svgs?

 

The answer to that, my friend, is: it depends.

 

It depends on what you want the output to be. It depends if you prefer a click and drag approach or if you are ok with code. It depends on what animation you are talking about, moving things on the screen, character animation, shape morphing. It depends on how much time/patience you have available.

 

In the end, there is no silver bullet. If you ask people they can only give you their personal opinions for specific scenarios.

 

All of the above, also happens to be just a personal opinion: mine.

 

;)

Share this post


Link to post
Share on other sites

Ok, I really want to learn Greensock. I am pretty good with HTML & CSS but Javascript has always left me confused. I understand it somewhat but need to really practice and get better with it. I was  able to move my arrows the way I wanted to inside of codepen but now I have another question, so far, the svg I have been working with,  I copied and pasted right into the HTML, such as:<div> <svg><g id="usa"> </g><g id="TX"></g></svg></div> If I want to link the svg using an object tag instead of pasting the svg code inside the html how would I target the inside groups of the linked svg? When I linked to the svg using: <object data="images/USAStates2.svg" type="image/svg+xml" id="u"></object> The animation stopped working. I just want to know how I can target my individual groups inside the svg that is linked. 

Share this post


Link to post
Share on other sites

I don't think you can access the inside paths/groups of linked objects.

 

There is another thread somewhere here where Jonathan explains in a bit more detail but I am not finding it at the moment.

Share this post


Link to post
Share on other sites

I would not recommend using an object. Read through this thread. It shows the how to use external SVGs. jQuery really shines in this aspect.

http://greensock.com/forums/topic/11187-accessing-svg-paths-in-external-file/

 

And check this out. Where's the SVG coming from???

http://codepen.io/osublake/pen/f9ad0aafc2fa585e60e4b9642ac716b3

 

Right here! It's just a string. As long as it's formatted properly, that's all you need.

https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/svg-string.js

  • Like 3

Share this post


Link to post
Share on other sites

Nice CodePen scavenger hunt you have there, Blake. Took me a minute to find how the svg got in there ;)

  • Like 1

Share this post


Link to post
Share on other sites

Hope you guys don't mind but I got a similair question.

 

What I did was drawing a shape in Illustrator with around 20 points and from every point I noted the x and y. That works but it is quite boring. And I have to do more points to get the animation more fluent.

 

The idea is simple, move a bitmap along a (invisible) path, I only drew in Illustrator to get the coordinates. But I wonder if it can be done much simpeler or is it just some boring write down the coordinates? Also took a look at the svg data if I would export it from Illustrator but except for the start point I think it's based on differences between points (like Blakes post makes clear) and not really making things easier in this case.

Share this post


Link to post
Share on other sites

Hi Oscar,

 

Since you are a Shockingly Green member you should tap into MorphSVGPlugin's pathDataToBezier() method:

 

http://greensock.com/docs/#/HTML5/Plugins/MorphSVGPlugin/pathDataToBezier/

 

It let's you get bezier data from an SVG path and then pass it into the BezierPlugin.

 

More about MorphSVGPlugin: http://greensock.com/docs/#/HTML5/Plugins/MorphSVGPlugin/

  • Like 3

Share this post


Link to post
Share on other sites

Since you are a Shockingly Green member you should tap into MorphSVGPlugin's pathDataToBezier() method...

 

Hero! I don't like to ask stuff but I'm really happy I did. Thanks! This makes other idea's I have also worth to try.

Share this post


Link to post
Share on other sites

Nice CodePen scavenger hunt you have there, Blake. Took me a minute to find how the svg got in there ;)

 

Haha! I was hoping that somebody would look at that pen and notice that something was missing, but you're just too good!

 

 

Hope you guys don't mind but I got a similair question.

 

What I did was drawing a shape in Illustrator with around 20 points and from every point I noted the x and y. That works but it is quite boring. And I have to do more points to get the animation more fluent.

 

The idea is simple, move a bitmap along a (invisible) path, I only drew in Illustrator to get the coordinates. But I wonder if it can be done much simpeler or is it just some boring write down the coordinates? Also took a look at the svg data if I would export it from Illustrator but except for the start point I think it's based on differences between points (like Blakes post makes clear) and not really making things easier in this case.

 

 

I used to do stuff like that before I knew JavaScript, but now that I do, I make a lot of JS based tools help me out. So for this, I probably use Draggable to play around with coordinates.

 

Here's a really simple look at how that could be done. Just move the missiles around, and it will let you test out the animation using the new coordinates and angle. From there you could use local storage or export a JSON file with all the info for your animation. 

 

Help Kim Jong @Dipscom take over the world in this exciting 5 element animation!

http://codepen.io/osublake/pen/533f7d740312e93f45e5fc38475f6456?editors=0010

  • Like 4

Share this post


Link to post
Share on other sites

I loved "Kim Jong Dipscom" even before I saw the image. Wow! Payback is sweet  :mrgreen:

Share this post


Link to post
Share on other sites

Ha! "Kim Jong Dipscom" is awesome!  :lol:

 

 

As the Old Klingon Proverb goes:

 

"Revenge is a dish best served cold."

Share this post


Link to post
Share on other sites

Really... 

 

I go away for ONE DAY and that's what happens.

 

Let's not say later I started it.  <_<

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

  • Recently Browsing   0 members

    No registered users viewing this page.