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

What is Framer? Join the Community
Return to index
Andrzej Słupski
Posted Jul 14 - Read on Facebook

Hi there! I'm looking for a framer example sketch with similar functionality to Apple Music "bubbles" (ie. fluidity, resizing).

Have anyone tried to replicate it yet?

12 Comments

Koen Bok

Don't do it.

Andrzej Słupski

Yup, it's a shitty onboarding UX, but I need to visualise a dashboard idea with 3 scalable/fluid 'bubbles' and Apple Music is kind of similar.

Jonas Treub

Do you want to drag those bubbles around or only change size?

Andrzej Słupski

Resize on tap.The tapped bubble grows in size, and lightly pushes away other bubbles.

Josh Ackerman

I am working on something like this to create a more efficient mobile home screen design http://drbl.in/oMzQ. It is not the same as Music, because I want to pack as many icons as possible into the home screen, although the aesthetic is similar. So far I have found that FramerJS may not be the easiest way to approach it. Maybe experiment with different physics libraries and circle packing. If you come up with a FramerJS solution I would love to hear it.

Andrzej Słupski

yea, I wonder if going with d3js or matterjs wouldn't be easier considering physics. 'Don't do it' just isn't an answer I'm looking for Koen

Ken Miura

so it might be more like a fish eye lens representation similar to what they did in Apple Watch? (for the launcher idea) I think the problem for that as a launcher is that it assumes you can recognize individual icon without text, and when you include text, the aesthetic (and may be computational) challenge goest up. If you want the individual bubbles affecting each other (like the Apple Music/Beats UI), then you'd need to code your own simple physics engine, perhaps?

Josh Ackerman

On topic: I think d3.js is the answer to your question.

Off topic: Since my launcher design was mentioned, I feel obligated to better explain it.

My idea with the launcher design is that apps grow larger the more you use them (within a min and max size), and they are dynamically circle packed into the most efficient layout, such that the number of apps on the screen is maximized. Additionally the most used icons are packed in the most reachable areas of the screen, and common workflows (a repeated sequence of apps) are packed as close as possible, but the ultimate goal is to maximize the number of apps.

Joe Barber

Honestly, that launcher seems way less efficient than the current home screen experience. So if you install a new app, it's now buried somewhere down that screen and you need to go find it every time you want to use it. Plus once it gains in use time, some other app needs to move for it to move up. For anyone who downloads apps even semi-regularly their home screen would be in a constant state of change, and at that point you'd be much better off just searching for apps with spotlight than using the launcher at all at.

I get the idea, and I think it's an interesting experiment, but I think the lack of consistency and just general chaotic nature of the layout makes it much more difficult to navigate than a consistent uniform grid of icons. Have you tried finding an app on an apple watch that's loaded with apps? It's kind of a pain in the ass. It's much easier to remember "oh that app's on my second screen in the wallet folder" than "oh that app is somewhere in the upper right area of my launcher"

As an aside, if the ultimate goal is to maximize the number of apps, wouldn't something more like the standard iOS status bar make more sense than the large minimal clock?

Nick Bewley

Joe is a valid point, but different people use devices differently. While you may look for apps in that manner, personally I flip through and find via visual cues. For me, therefore, Josh's idea works great. Would be interesting to see the idea pushed further to accommodate different personas.

Koen Bok

Yes I'm sorry, that is not my favorite ui :-)

There is no easy, built-in way to do this with Framer today. You will need to combine a physics engine line Newton.js Box2d or p2.js with a graphics engine like d3, Framer or Pixi to replicate this.

Josh Ackerman

Different designs definitely do accommodate different people. I am simply experimenting with one that is "smarter" and mathematically more efficient. I am not claiming that it will work for everyone.

I personally could not imagine scrolling through 10 pages with 4 apps on each to find an app on a Apple Watch (I do own one), but everyone has different preferences.

The bit about third party apps is a great observation, that I did not consider. I am thinking out loud but it would be possible, by default, to give new apps an average size, and grow or shrink them based on usage. Conversely, if for instance the user downloads a new calendar app, it could take the size of the existing calendar app. Or a new sports app could grow based on how many times a user searched for scores from on the web.

Read the entire post on Facebook