Interactive Animations in HTML

I’m using Webflow to teach basic Web Design students at the university level. They learn basic markup (HTML/CSS) in the previous class, and one big takeaway I teach them is separating all CSS from HTML.

I noticed that when you design an interaction in Webflow and export the code (as all my students do), that directly translates to “data-w-id” attributes and inline style attributes with a ton of CSS injected.

Is this just the way that Webflow works? Is there a way to neatly move any CSS over to the stylesheet (I guess this could be done manually?) as a matter of separating content from style?

Thanks for any insight!

Yep. This is how it rolls.

Not an option.

Thanks for confirming that! I know that it works just as well inline, but something just bothers me about it showing up looking like spaghetti code.

In the end I think I can live with it though: the time that’s saved over crafting CSS interactions & animations by hand using @keyframes … it’s palpable.

I’ll blame those CSS-standards advocates who taught me markup in the 'aughts for my weird annoyance with this. (Zeldman, Cedarholm, Shea …). :slight_smile:

@hardydl - I think the only real issue is one of portability. Once you go down the WF Animation Train, you are locked into maintaining animations in the designer for all practical purposes. There are also limitations to IX2.

If portability is a requirement, I prefer to use Greensock’s GSAP (which writes styles out to the elements and hint they all do). Its JS API easily controls it. It’s faster and more fluid, has more features, is portable, and It supports callbacks and functions, which WF does not. Anime.js is also a well-received library worthy of investigation.

1 Like

Wow! Greensock is definitely something I’d like to aspire to eventually start using. Super helpful. Thanks for giving a definitive answer on this so I can either live with it or move-on to something more extensible!