Why do animations matter on the website?
Good question. Many people might think that it's not that important, and that the content and message a website conveys should take priority. However, it doesn't work this way. If we consumed just content, there would be no discussion about styling, and websites would be written in plain text. Humans are visual beings; we pay attention to aesthetics and enjoy natural interactions.
Take iOS as an example. Not everyone may prefer it, but most agree that its animations are smooth and intuitive. This is because they feel natural, fast, and seamless. We want to replicate that feeling on landing pages to ensure that users feel connected to the content, experience smooth navigation, and are encouraged to explore further or try the product or service. This is why animations matter—they go beyond visuals to create an emotional connection.
General rule for animating
Do not animate everything blindly. Make sure that each animation has purpose and serves users well. Make sure that it has proper timing and motion.
Shortly, what to avoid?
- overusing animations,
- poorly timed or unnatural movements,
- ignoring performance metrics.
If you will do that blindly, you can harm website, conversions and business. Sounds scary, but that can reality (however, doesn't have to be). Make sure that your animation does not distract users from checking main content of the website, and additionally try to empower main content, by pointing users to given element, instead of distracting them, and causing them to lose interest in the information website tried to pass to them. It's sometimes better to keep it simple.
How to implement animations on the website?
There are several ways of implementing animations on the website. I will skip animating elements in no-code website builder, such as Webflow or Framer. I will focus on vehicles that allow us to animate custom code websites.
CSS Transitions
It's the simplest, yet effective way of animating micro-interactions on the website. Want to animate hover effects or add color fades? It will be your go to solution. Since transitions can be hardware-accelerated, they are additionally less likely to cause performance issues on the website.
CSS Keyframes
I use keyframe animations when there is repetitive animation to be done, e.g. motion of marquee component. My issue with keyframes is that they are not interruptible, which is not acceptable for longer interactions, such as modal opening.
Animation libraries
This is the most powerful, yet most resources consuming type of animations that I use. But it's required. Check knm's navigation interaction. It would be much harder to implement e.g. exit animation if Motion - my animation library of choice, has not been used. Pros of using it? Biggest things for me:
- supports spring animations (more on that soon),
- is interruptible, while supporting complex motion,
- supports layout animations.
The entry level is higher, but the possibilities are greater than with pure CSS and JS. Of course, there are down-sides of this solution, the biggest one is bundle size increase. Especially on websites that required super fast loading, it might not be possible to include animation library into workflow, however it should not be an issue for most cases, especially when website utilizes animations heavily.
How to make animation feel right?
Making animation, with random timing function doesn't make sense. Each animation that you serve to your users has to have purpose, and be connected to the interaction they perform. That's why proper feeling is also important. There are three core elements, that define how my animations behave:
Duration
Timing is everything. Animations that are too fast feel jarring, while overly slow ones frustrate users. For micro-interactions like button hovers, 200–300ms works best for me - quick enough to feel responsive, but not instant. Larger movements, like modal appearances, benefit from longer durations, to avoid feeling overwhelming. The key is consistency: similar actions should share matching durations across website or application. It might be beneficial to include those durations into your design system.
Easing
Linear motion feels robotic. Easing adds acceleration and deceleration, mimicking real-world physics. Use ease-out for elements exiting (fast start, slow finish) and ease-in-out for transitions between states. Make sure to play with different variations of easing, and check all of them, for specific use cases, e.g. linear motion should be avoided for interactions, but it will be the best choice for continues motion, such as the one for marquee.
Spring Animations
Traditional easing relies on fixed durations. Springs, however, simulate natural physical tension and bounce. Imagine stretching a rubber band—the motion accelerates and decelerates based on stiffness and damping. Thanks to that spring animations feel natural. The issue is that it's not possible to achieve them with pure CSS, we can only simulate them. That's why animation library is necessary there.
Motion’s spring system allows tuning duration (perceived speed) and bounce (elasticity). A high bounce feels lively, while zero bounce creates a smooth, fluid stop.
When to Choose Which
- Duration + Easing: Ideal for static UI elements (buttons, color fades) where predictability matters. Also better for performance-heavy projects, when it's not possible to use animation library. In such a case it will be better to simulate spring motion (if needed), rather than include animation library and increase bundle size
- Springs: Use for dynamic, interactive elements (drag-and-drop, gesture-based UIs) or when you want motion to feel alive, responsive and natural.
Experiment
Despite the fact that there are ton of resources online, make sure to try different stuff on your own. Well, learn basic, implement some basic and more complex animations, but then try creating something on your own. It will not only benefit your skills, but also taste, that is super important when creating beautiful interfaces.
Conclusion
When using web animations, you have to find balance between creativity and usability. As with the entire web design and development field, you have to find fields that have to be well orchestrated, so they will create amazing digital experience for end users. Make sure to apply those principles, and enhance experience on your website. Good luck!