Selective front-end development
Dynamic effect design is one of the hottest trends of 2018. If you look around, there are many interesting tools for building UI actions, and these materials and tools are becoming indispensable catalysts for more and more design projects. Today ~ xiaobian recommends 10 reliable open source free web animation libraries to help you speed up your design ~ ^_^
1. GSAP
GSAP is probably one of the coolest free animation libraries out there. It runs on pure JavaScript and is one of the most robust animation libraries available. It complies with the HTML5 specification and works well with almost all modern browsers, including SVG, canvas elements and even jQuery objects. Libraries such as EaselJS also work well with GSAP. If you need a powerful web animation library, GSAP is definitely worth a look.
2. Anime.js
When I first saw the animo.js library, I was mesmerized by it. It’s very powerful and not limited to UI/UX animation. You can use animos.js to animate everything from logos to buttons to images. It supports a variety of common trigger mechanisms, such as clicking, hovering, and swiping, with which you can define a series of animations.
3. Wicked CSS
Wicked CSS is a relatively new animation library that is largely based on CSS code. Wicked CSS leverages the features of CSS3 to provide some incredible special effects. On its front page, you’ll find live demos where you can learn how to rotate, flip, swipe, and other different types of animations. Some animations are very simple, but it can also do a lot of complex and interesting animations, which is where Wicked CSS comes in.
4. Animate CSS
Perhaps Animate.CSS is the ultimate web animation solution you want. This open source library was released a few years ago, but it is still the most useful dynamic effect library today. The developer Daniel Eden is the initiator of this project. He published customized CSS3 animations on the web in the most simplified way. After more than half a year’s accumulation, he built a complete animation library, which can handle almost most projects. There are plenty of demos on the project home page, and plenty of great documentation on GitHub for your reference.
5. Tuesday
The most fascinating thing about Tuesday’s animation offerings is how simple and useful they are. With this library, you can effectively control the way elements appear and disappear on your page. These animations aren’t awesome, they’re subtle, and really improve the design of the page from an aesthetic and user experience level. Tuesday is pure CSS code that works seamlessly with almost any web site.
6. CSShake
Frankly, I’ve never seen a weirder or more interesting CSS library than CSShake. The animations are crazy, unique, and not necessarily suitable for every site. In other words, the motion effects provided by CSShake are actually unique, which is why it’s on this list.
7. Mo.js
After a careful comparison of JavaScript libraries in detail, MO.js is one of the best dynamic effects libraries. Mo.js is huge, and it’s a dynamic library for UI/UX design. There is plenty of documentation and tutorials on Mo.js, and the code is not complicated enough to be mastered once you know it. It has a lot of amazing features, whether it’s navigation bars, logos or other complex elements, it can animate them properly.
8. Animate Plus
Animate Plus is a lightweight animation library. It is only 2KB, but it has all the basic functionality needed to customize JavaScript animations. With NPM you can easily install Animate Plus, just follow the code on Github to set it up. Most of the included demos are basic, so you won’t run into complicated problems, but you’ll find all the options and methods you need through Github.
9. Bounce.js
With just a few clicks, you can create powerful CSS3 and JS animations with the help of Bounce. On the home page, you’ll find a modular custom animation generator, and in this way, Bounce. Js will help you add specific features to your pages without adding extra code. Unlike other tools of this kind, it is not just a library, but has actual functions that users can operate directly, and it comes with a complete web builder. Bounce. Js is one of the few animation libraries that can be designed and set up directly in the browser.
10. Magic
Magic is probably one of the most interesting libraries of kinetic effects. It is a collection of CSS3 based animation effects with many custom styles that are not found anywhere else. This is a very large collection of CSS3 codels, and you’ll also learn a lot of clever animation techniques here. Place the author: Geek hao elder brother, the original link: http://igeekbar.com/igeekbar/post/983.htm. Please indicate the source of reprint.
For more
What the hell is blockchain? A cartoon lets you understand in seconds!
An introduction to screen Fit Sizes
Crack Android version of wechat jump jump, a trick to teach you challenge high scores
Remember a ali interview experience | Java knowledge to sort out the interview
Regular expressions will teach you in minutes
Technical Articles collection for the first half of 2017-184 articles grouped together
Advanced UI special like live like effect – a beautiful cool like animation
A small case of recording and playback
NDK project actual combat – high imitation 360 mobile phone assistant uninstall monitoring
Believe in yourself, there is nothing impossible, only unexpected
Wechat official account: Terminal R&D Department
