Animation is one of the top user interface trends this year, and little wonder. 2017 has seen its fair share of spellbinding UI animations, thanks to their ability to direct and enforce action from users as well as compel even the most distracted of audiences.

UX expert Alex Walker and hacker Tanay Pant have compiled a list of the best animation libraries for UI designers in 2017 on web developer hub SitePoint.

If you haven’t started using animations, you probably should, as their attention-grabbing quality and functionality mean that this trend isn’t going away anytime soon. The article also provides a number of sources for low file size animations, so there’s little reason why you shouldn’t be hopping on the bandwagon.

Check out some of the best animation libraries below.

1. Animate.css

Screenshot via Animate.css

After four years, this straightforward “just add water” CSS animation library is still one of the most popular and foolproof ones available. Its animations are quick loading, making them ideal for mobile projects as well. If you’re just starting out and want to experiment with simple animations for your website, ‘Animate.css’ is a great option.

2. Bounce.js

Screenshot via Bounce.js

Created by Sweden-based web developer Joel Besada, ‘Bounce.js’ is a wonderful JavaScript library of gorgeous CSS3-powered animations. The site offers two main options: you can either manually create and tweak your own animations or choose from 10 fun presets.

Like ‘Animate.css’, this library provides animations with low file sizes. “You might want to consider using this library if your needs centre around ‘pop and bubble’ style animation types and could benefit from a lower file size overhead,” Walker and Pant say.

3. AnimeJS

Screenshot via AnimeJS

AnimeJS’ is the newest library to join this list, but has already garnered considerable attention from the UI industry. It’s a lightweight JavaScript animation library that “works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects”.

If you’re looking to go beyond basic CSS animations, ‘AnimeJS’, with its—according to SitePoint—“smooth and buttery” options, should be your go-to.

4. Magic Animations

Screenshot via Magic Animations

If your project has some leeway for animations with slightly larger file sizes than ‘Animate.css’ and ‘Bounce.js’, check out ‘Magic Animations’. It’s well-known for its sophisticated animations, including “bling”-like and exploding effects.

[via SitePoint, images via various sources]