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

What is Framer? Join the Community
Return to index
Marc Krenn
Posted Nov 02 - Read on Facebook

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)

10 Comments

Marc Krenn

same problem, less serious interpretation: http://share.framerjs.com/v3tfst4tiaf6/ :D

Jordan Robert Dobson

Yep that's exactly what I'm talking about. The end of the tail.

Jordan Robert Dobson

I also was trying to get it to be a little more natural with some spring curves. That is looking pretty good though.

Marc Krenn

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?

Jonas Treub

Made this one a little while ago: http://share.framerjs.com/bwazbkn9q24h/

Marc Krenn

Maybe using "animate" isn't such a bad idea after all, as is its interpolation does a way better job than expected:

http://share.framerjs.com/0vhurv89y6py/

I'm pretty happy with the result :)

http://i.giphy.com/3oEduWFwiu1lR2JuMg.gif

Jordan Robert Dobson

Awesome guys. I'll take a look today. Excited to see how you're tackling this.

Marc Krenn

Final version, cleaned it up and added some comments:

http://share.framerjs.com/oyy3fvogc8f1/

Marc Krenn

okay, that's pretty trippy:
http://share.framerjs.com/cyoefbqd2zau/

(Safari + Framer Studio only)

Marc Krenn

... 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.

Read the entire post on Facebook