Animation can totally transform a user's experience in a web interface. Companies like Apple, Uber, Airbnb, Duolingo have shown the world the effects, motion uhhmm... effects, have to elevate delight in a user's experience.
But, today adding animations on the web is pretty challenging. Engineers are forced through a labyrinth of libraries; designers are trying to fiddle with Figma; and creatives are stuck to the basic functionalities within no-code tools.
There's got to be a better way... now there is — Rombo!
# Animating visually
As a software engineer, animation is a strange way of working — styling static components on the web with CSS is reasonably challenging; flexbox, grid, backdrop-filters, but, you can instantly see the result of any experimentation.
Now, if you try to add any motion to the effect with either CSS or JavaScript, things get a little messy. It goes a little something like this:
1. You map the desired effect into a timeline and into dimensions.
2. You try to implement the effect with CSS keyframes, or an animation library like Framer Motion, GSAP, or Anime.js.
3. You refresh the page, wait for the animation to play, and repeat step 2 a number close to infinity times.
What if, instead, you could simply click an element in your browser; visually configure the effect; and export the code?
Well, you're in luck! That's exactly what we're going to be releasing in November at RomboHQ 🚀 With our visual animator, you simply load up the Rombo Extension, bring the element to life, and export to your preferred CSS or JS library.