how would you approach this animation?
Specifically the big bubbles with the app icons pushing the smaller bubbles out of the way and then resetting themselves
28 Replies
not only do the smaller bubbles move, but they also change size a bit. it could probably be done with a particle system and some smart maths with canvas/js (check Frank's Laboratory on YT), but i think this is animated by hand (per icon there are 11 bubbles that are affected)
Ah you're right I didn't notice that bit. And the large bubbles with the app icon don't rotate themselves (eg the music icon doesn't turn sideways its always straight up and down.)
This one looks tricky.
the none-rotation wouldn't be that hard to do, the whole thing rotates, so you counter that by rotating the icon in the other direction
I was thinking that the icon piece might be a bg image thats changed from the fixed gradient to the color and icon before it shapes down and turns back into a normal bubble . With the gradient.
maybe it's animating between states and this is some kind of mask
yea, a mask would make sense, or maybe a blend mode
Maybe view transitions could help but Iβm not so sure that this is something I could attempt. Which is a bummer
tbh i don't know where to start with being sure i could manage the end result. (it's a bit too big of a thing to just try)
normaly I wouldn't suggest other servers, but maybe you can find more help at
Frontend Horse (do a lot of generative art / animation) or Coding Train (p5js / canvas)Love this design.... I feel a weekend challenge coming on π
good luck on that. i keep looking at it too, but don't know if I am willing to invest the time
If anyone can do it, itβs Chris !!!
I admire your confindence but I wouldn't hold your breath π
This as far as I have got for now.
No rotation and no background gradients...
Still lots to do π
Added some rotation. That will have to do for today.
Youβre def gonna have to share that code when youβre done . Great work already! Im so excited that youβre taking this on , it would take me weeks not a total 8 hrs . Chris ! Chris ! Chris ! (Hero chant )
Fun icon set too
The code is not actually not that complicated, at least not so far. I will admit to using good old manual positioning to position and transition the circles rather than any complex math functions.
I need to work out how to get the circles to reveal the background gradient in the main wrapper. For some reason I have been having a mental block on this today π€―
Iβve not spent any where near 8 hours on this. Probably not even 2. My wife would get mad if I spent all Saturday at the computer π
do you have any article about these math calculations? it seems to be really helpful for responsiveness and more
Good grief Chris you're a rockstar.
For the gradient can't you just use something like a custom property in the root with fixed?
That is basically what I was trying.
However as soon as I add any sort of transform (translate, scale or rotate), it messes up.
A quick demo: https://codepen.io/cbolson/pen/PormRrR
I have added transform on a couple of elements and they loose the "fixed" property.
Any ideas or an alternative approach to only show a background gradient within the circle boundries?
chris is the coolest guy i know in this server
Have you considered using mix-blend-mode with a single gradient behind all the circles?
Hmm mask?
Iβve tried all sorts of solutions but had no luck.
Where did you see the original animation? I might have to take a peak to see how they did it π
Was able to achieve this result in one evening, animation is more simple than original
need better animation and fix icons, gradient rotation
It's an apple/iPhone thing when I was transferring data or logging into the iCloud or something
Nice! Do you have a link to the code ? Im curious how you approached.
That's cool that whichever circle you hover over has it's own icon!
I forgot to post my code. I couldn't spend much more time on it beyond trying to work out a way to add the fixed position background gradient on the dots. @Tirius I would love to know how you at least got the dots to have a common background even if it isn't fixed position.
This is as far as I have got so far https://codepen.io/cbolson/pen/QWXvPYW
As you can see it has manually positioned dots and is not at all responsive π
Chris Bolson
CodePen
[incomplete] - rotating radial buttons (inspired by Apple)
Originally posted as an example within this Discrod :https://discord.com/channels/436251713830125568/1269108430170230844/1269108430170230844 An Apple ...
I will post some examples a bit later, at work atm
https://codepen.io/The-Tirius/pen/MWMoaGz @Chris @clevermissfox
not perfect but that's what I had time for
That's cool that you have manage to do animation without js π
Still love it and that you helped break it down , I had no idea where to start to try and do fancy math but the css only looks beautiful and isn't too crazy to manually position , esp if using scss loops