Streaming live at 10am (PST)

CSS Solar Sytem simulation


#1

For May the 4th, I made a CSS solar system you can clone.

https://webflow.com/website/Solar-Wars

If someone can make my 360° z rotation loop smoother, that'd be cool!


#2

really cool. Great tribute to May the 4th.


#3

Pretty cool @vincent, it looks pretty neat smile


#4

Love it Vincent!
"CSS Solar System"... Is it me or can this be misconstrued? I mean is not really animated using CSS but rather Webflow's interactions which are JQuery based. Am I correct?

Cheers


#5

At first I thought Webflow was using JS for everything regarding interactions, but no, it relies as much as it can (it seems) on CSS.

Here is the common element corpse-container inspected.

It's for the best, CSS anims are way smoother http://css3.bradshawenterprises.com/blog/jquery-vs-css3-transitions/

Edit: if you look closely, Interactions panels only allow you to modify CSS properties: move, scale rotate with transform, then opacity, display, transition time... etc


#6

Wow @cyberdave have you checked the easing modes editor right in Chrome inspector?

We want that in Webflow! ◕‿◕


#7

Opened my eyes. Thank you for that explanation. You are right, only CSS properties. I guess it only uses JS to perform more complex interactions or when you add various steps to one.

Thanks!


#8

I second that petition! It really would be an awesome feature,


#9

I'm using a very specific set of easing modes, spread in the long list, so each time it's a bit long to select. I'd like the easing modes to be axactly like a color palette, where I can design one (with a similar tools than Chrome has) and save my modes into a grid where it's easy to call them back.


#10

#11