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.
Yes! I can't remember the exact syntax but it's like myLayer.on Events "change:x", ->
I've used that to keep two layers in sync before.
Here you go
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) ;-)
I would make a method and call Utils.throttle on it.
What Jordan said. This prints the point every half second.
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
Any ideas, anyone?
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.
I don't recall where I saw it Ondrej. I'm pretty sure I found it in others examples.
Ondrej Rohoň dunno, tried to reupload it: http://share.framerjs.com/jxx3k5jjuhms/ díky!
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?
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/
Basically I am trying to create effects similar to those presented here https://dribbble.com/shots/2003328-Create-Process
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
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.
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"
sorry Josef, looming deadline at work, can't have look at it now :/