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 
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.