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

What is Framer? Join the Community
Return to index
Thomas Quarre
Posted Apr 29 - Read on Facebook

Hey all! I'm looking to recreate the animation from the google fit app where the ring fills in to show daily activity (video https://vimeo.com/112889094). Is there a snippet which would be a good place to start? If not, any recommendations for resources are appreciated, thanks!

9 Comments

Marc Krenn

Once merged, I believe this (https://github.com/koenbok/Framer/pull/151) could be pretty helpful for those kinds of things.

Until then, you most certainly will have to use some sort of hacks to achieve this effect. I believe some people tried to replicate this very animation before and came up with some pretty elegant solutions - unfortunately I couldn't find them right now.

Anyway, here is my pathetic approach - how it SHOULDN'T be done:
http://share.framerjs.com/dqmv6x3of3ym/ (works best in Safari/Framer Studio)

Thomas Quarre

Cool, thanks Marc Krenn!

Johannes Eckert

a few examples have been posted to use paper.js with framer that should also allow you to do this. if you look for paper.js examples, google for polar clock examples

Thomas Quarre

thanks Johannes Eckert

Jinglu Li

Thomas Quarre Are you working as a product designer now?

Thomas Quarre

Jinglu Li yea! Have been doing mobile ui since Penn, you in SF? DM me

Noam Elbaz

Marc Krenn did the Framer team express any plans to merge your code?

Marc Krenn

hi. first of all it's not my code, its Tisho's ;)

And yes, according to the discussion on github it seems like it will be merged soon-ish.

Noam Elbaz

Marc Krenn thanks.

Read the entire post on Facebook