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

What is Framer? Join the Community
Return to index
Josef Richter
Posted Apr 10 - Read on Facebook

Is there a way to observe x, y position properties of a layer while it is animating, please? I.e. it's not a drag/scroll event.. Ideally a way to observe any changes in x, y, no matter what caused them? Thanks a lot.

19 Comments

Jordan Robert Dobson

Yes! I can't remember the exact syntax but it's like myLayer.on Events "change:x", ->

Jordan Robert Dobson

I've used that to keep two layers in sync before.

Chris Camargo

Here you go

Josef Richter

cool, that's it! do you please also know if there's a way to observe the delta? because with a spring animation it can fire hundreds of values and I need to narrow it down a little bit, coz I need to update canvas based on it (=heavyweight shit) ;-)

Jordan Robert Dobson

I would make a method and call Utils.throttle on it.

Chris Camargo

What Jordan said. This prints the point every half second.

Josef Richter

OK I need some experienced help here. I'm trying to do spring animation on paper.js path. The two main troubles are

1) canvas is not updating properly at the end (spring oscilates too qucikly at the end) and

2) canvas scaling is fucked up unless I hardcode everything.

Can anybody help me out please? This could be a badass interaction effect... Thanks

http://share.framerjs.com/3y6jrjv9qqbv/

Josef Richter

Any ideas, anyone?

Ondrej Rohoň

Josef any ideas why I can't see download button for that project? I will have look at it.

Jordan where did you find these "advanced" events? I haven't found anything like that in documentation. Thanks.

Jordan Robert Dobson

I don't recall where I saw it Ondrej. I'm pretty sure I found it in others examples.

Josef Richter

Ondrej Rohoň dunno, tried to reupload it: http://share.framerjs.com/jxx3k5jjuhms/ díky!

Ondrej Rohoň

My suspicion is that paper.js file is not loaded when framer studio tries to run your code. When I miror it to google chrome, it works, paper is drawing that path.
I would use Utils.domLoadScriptSync to make sure that CDN hosted JS library is already when we need it. Does it help?

Josef Richter

Ondrej I'm testing it in Chrome, the Framer studio doesn't bother me that much for now. The thing is it works in Chrome, but it doesn't work smoothly. The curve follows the handle, but the oscillation at the end of the spring animation seems to be too fast and paper.js is probably choking under all the values and redraw requests it is getting. I think I need to narrow down to volume of data it is processing, but not via Utils.throttle. I made an attempt to limit the updates only when delta > 5 here, but it doesn't seem to help. Maybe the problem lies elsewhere? http://share.framerjs.com/afwkx7pw7t1q/

Josef Richter

Basically I am trying to create effects similar to those presented here https://dribbble.com/shots/2003328-Create-Process

Joshua Tucker

Josef Richter Saw you are working with PaperJS. I have worked with it a little and I didn't observe any particular problems. It's possible that the contexts are much different. However, if you want to see how I used it to oscillate a layer (based on playing music), you can see the bundle (code + other stuff) here -> http://cl.ly/ZNLP

Josef Richter

Joshua Tucker Thanks a lot. I see you're using paper.js directly from js / framer file, but that shouldn't have much impact. My suspicion is that the calculation I'm doing is maybe more demanding and it's choking under the amount of data. But still, it's not THAT much. So maybe there's problem elsewhere, and I don't know where.

Koen Bok

It often can help to play the animation in Chrome and look into the timeline profiling tools: https://developer.chrome.com/devtools/docs/timeline

See "Frames Mode"

Ondrej Rohoň

sorry Josef, looming deadline at work, can't have look at it now :/

Josef Richter

ok, I tried to put all the javascript into one file and tried to frames mode profiling. I don't see any obvious bottlenecks there. but the animation is still not smooth. honestly no idea what to do with it now. anyone please?

updated: http://share.framerjs.com/brx8i97myriw/

Read the entire post on Facebook