Jordan, let's talk Chat Heads! To me it seems like the "passing down"-method seems to work pretty well, beside some jittering at the end of the "tail".
What do you think?
final version: http://share.framerjs.com/oyy3fvogc8f1/
vastly improved v2: http://share.framerjs.com/0vhurv89y6py/
version 1: http://share.framerjs.com/4ie8ww3pfq8y/
(gif shows v1)
same problem, less serious interpretation: http://share.framerjs.com/v3tfst4tiaf6/ :D
Yep that's exactly what I'm talking about. The end of the tail.
I also was trying to get it to be a little more natural with some spring curves. That is looking pretty good though.
Hypotheses: DragMove - and maybe Framer in general - isn't quick enough at storing new coordinates, so when the "director" gets moved around in a quick manner (large saccade/delta) it doesn't save enough coordinates to let the following Chat Heads recover the trail jitter-free.
Proposed solution 1: Somehow decrease the update interval, either through code optimization, by getting "closer to ze metal" or both.
Proposed solution 2: Naïve interpolation of coordinates - would make the tail move smoother in t while x/y-translation would unfortunately stay as choppy/angular (btw that's pretty much what "animate" would do, regardless of being linear or using a spring curve).(EDIT: I was wrong, see v2)
Proposed solution 3: A continuous SVG path based on Catmull Rom or Overhauser splines, with Chat Heads following on delay.
(Proposed solution 4: Super complicated spring-based solution. No, we really don't want to go there.)
Does anyone have some other/better ideas to solve this?
Made this one a little while ago: http://share.framerjs.com/bwazbkn9q24h/
Maybe using "animate" isn't such a bad idea after all, as is its interpolation does a way better job than expected:
I'm pretty happy with the result :)
Awesome guys. I'll take a look today. Excited to see how you're tackling this.
Final version, cleaned it up and added some comments:
okay, that's pretty trippy:http://share.framerjs.com/cyoefbqd2zau/
(Safari + Framer Studio only)
... aaaand here I am, breaking my promise by bumping it again - but this time for the purpose of education! :)
I was curious if one could achieve the same effect by using a simple time-offset in animations (and therefore if all my work was pointless in the end).
Turns out, nope, you can't do it that way: http://share.framerjs.com/uz4gmsamy661/
You may not notice the difference if the "tail" is short enough, but once it reaches a certain length and it has to follow a quick motion, it's very apparent that I just won't work this way.