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

What is Framer? Join the Community
Return to index
Stephen Crowley
Posted Oct 06 - Read on Facebook

Just messing around this afternoon and trying to recreate the Apple Watch homescreen- I have the app scaling based on the screenFrame value on dragMove. Curious as to how I should work in the position of the icons based on proximity of each other. The Apple Watch homescreen icons keep a tight proximity and based on this example you can see how it would greatly improve the the effect on scroll.

14 Comments

Luka Marčec

This is really nice, man!

Stephen Crowley

Thanks Luka - I'm hoping to get the app icon positioning to work correctly and then I'll post the source so people can improve on it.

Mike Meyer

seems like this would be a lot smoother if you calculated the hypotenuse from the center x and y to each icon’s x and y and then used something like Utils.modulate to get the scale value.

Mike Feldstein

Do you have a gif or simple video showing the desired motion? I wouldn't mind taking a crack at that.

Stephen Crowley

Hey Mike Meyer - sorry, had to wrap my head around your suggestion but I think I got it and if I can get it right it would be a cleaner implementation. Thanks!

Stephen Crowley

Mike Feldstein - here: http://youtu.be/RCt3iPb9E2M?t=1m6s

Mike Meyer

Stephen I also realised that there’s weird box-packing-ish scaling issues you’ll run into for the edge circles. Gosh, this gets complicated.

Fun challenge!

Stephen Crowley

Oh man... PNGs, of course! I forgot about that. Hrmm

Stephen Crowley

Thanks Jay !

Karan Reddy

Awesome dude , Nice work

Min-Sang Choi

sounds like fun project. :-)

Ed Chao

Man, I still can't shake the trypophobia with apple watch.

Guus Baggermans

I was just playing with the same. Did not get that far though :)
https://www.facebook.com/photo.php?v=10152774220674493

Stephen Crowley

Ed - totally! But just from messing with this project I've really grown fond of it. It's a testament to how bold Apple is willing to be but with great intention.

Read the entire post on Facebook