This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Antonio Krämer Fernandez
Posted Aug 03 - Read on Facebook

fiddling around with svg animation in framer and now I'm wondering how to get the position of a svg element… any ideas?

14 Comments

Joshua Tucker

Hey Antonio! You can do the following:

Divide the total length of your path (trackLength) by the number of seconds it will take for your shape to make one loop. Then multiply it by your interval. In your case, it would be .2. This will give you the distance the object has traveled in .2 seconds.

Then, create a variable that captures the coordinates at said distance. Also, have some way to reset the distance variable back to zero when its reached the total length of the path.

rectDistance = 0

Utils.interval .2, ->

if rectDistance is trackLength
rectDistance = 0

rectDistance += (trackLength/30) * .2
rectPoint = track.getPointAtLength(rectDistance)

# For example, print them out
print rectPoint.x
print rectPoint.y

* Note: This is assuming you are starting your interval right away when your shape objects begin animating along the path, like in the example you shared. Otherwise, I'm not sure how you could judge distance by the time.

Jordan Robert Dobson

Oh man Joshua Tucker this is awlsum

Joshua Tucker

Jordan Robert Dobson My math gets better by the day! :).

Jordan Robert Dobson

I hear you. It's great when it begins to click eh?

Antonio Krämer Fernandez

thanks Joshua Tucker! This is realy awesome, with this approach its even possible to animate framer layers along a path and determine the velocity :).
Layers along a svg path: http://share.framerjs.com/qbzo9r3sf50c/ (somewhat buggy in chrome/safari, reload if animation doesnt start)

Joshua Tucker

Antonio Krämer Fernandez Super rad! Glad to help. Jordan Robert Dobson and I are working on a SVG module for Framer so this is cool to see. Keep up the good work my friend, inspiring work!

Antonio Krämer Fernandez

thx Joshua Tucker. a svg module could be super convenient! I look forward so see with what you will come up. :).
I did another experiment where I use the svg path to modulate the velocity of an animation. Basically the current y-position of the svg point defines the velocity value. Maybe useful for custom animation/transition.
VelocityTimeline: http://share.framerjs.com/pccsh8ph3tcy/ (agian somewhat buggy in chrome/safari, reload if animation doesnt start)

Giovanni Caruso

Joshua Tucker any easy-to-start-with math reference applied to animation? I was looking for some book (sort of ) on the topic but no luck yet... (spent some time with The Nature of Code ...but too complex for me at this point).

Jordan Robert Dobson

This is some interesting stuff I'm going to look through... Might be relevant somewhat...
http://bit-101.com/tutorials/

Joshua Tucker

Giovanni Caruso That is a really excellent question – I am in the same boat, and would love to pour through a good math resource. I'm not much of a reader, honestly, I should be because I'd probably be way better off! I like to solve things through pulling in resources from around me. In my experience, the best way to learn "the math" is to not stray away from creating things because of the foreseen limitations. Sounds like a silly observation, but it's amazing what you uncover when you apply yourself. Starting having to apply the math and then find the resources you need to make it happen. Thinking mathematically is less about skill or knowledge as it is about approach, in my opinion. It's a mindset. Or maybe that's my coping mechanism for not being the math wizard I wish I was :).

It's best to separate the math, at first, from the interaction or animation you are creating to focus just on the conceptual and calculative properties of the math itself. Make it real in your own life, in your own terms, where you understand the variables. Then, you're focused on solving just one problem instead of two. You can so easily get entangled by how to apply the math in your code, am I right? Adding the potential complexity of the math to the application of it doesn't allow you to systematically understand each piece before putting it together. Let's use this SVG project as an example.

We needed to figure out where the object was along the line. So stepping outside of the code, I could say it takes me 15 minutes to drive to nearest big town where I live. The next big town is 8 miles away. Now, when I'm 2 minutes into driving, how far have I gone? Well, 2 minutes is 25% of the 15 minutes it takes me, and if I take 25% away from the total distance, that gives me 2 miles. This makes sense to me. I have a frame of reference on what that means. Now, take that and apply it to the SVG example. I know my trackLength, I know how long it takes to make it to my end destination, and I know the interval I'm checking. So, I setup a variable and capture the value. Now, this object is moving indefinitely, as the code suggests, so now I have to account for the fact that I'm starting over each time I drive back and forth between town. So reset the variable. Now, there are much more difficult things then this, right? Crazy stuff with circle rotations, centroid distances, all this nasty stuff (recent endeavors of mine), but look up what you want to solve, read through the implementations people have down, step away from the project, maybe open a new Framer project and make a layer variable and just screw with it. Test, test test.

Sorry, this was probably not the answer you were looking for – I got a little talkative, haha. But I guess I want this to be an encouragement to anyone that feels discouraged about the math behind all of this. Applying math is often very difficult, and there's really no-easy way to start it up.

Learn the properties behind the implementation of the math, separate it from the code itself and make it real to you, never stray away from an opportunity to solve a problem, and over time your mindset will change about what you can accomplish and you'll start making connections between interactions/animations and the math that drives them.

Joshua Tucker

Jordan Robert Dobson Wow, great find. Cheers man!

Jordan Robert Dobson

Yep. His explanations, although about flash, totally are simplified and step by step.

Giovanni Caruso

Ehi Joshua, thank you for the invaluable hints. I see your point. I'll try to refine my approach keeping in mind your words. (Btw, thanks to Jordan for the resource).

Jordan Robert Dobson

It takes practice to break a problem down into small pieces. The smaller the pieces the more wins and future solutions you have along the way.

Read the entire post on Facebook