CSS Solar Sytem simulation

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

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

http://vincent.polenordstudio.fr/snap/u80fc.jpg

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

6 Likes

really cool. Great tribute to May the 4th.

Pretty cool @vincent, it looks pretty neat :slight_smile:

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

1 Like

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.

http://vincent.polenordstudio.fr/snap/ktaa2.jpg

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

1 Like

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

http://vincent.polenordstudio.fr/snap/jx8m0.jpg

We want that in Webflow! ◕‿◕

2 Likes

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!

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

1 Like

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.