Anime.js is a lightweight JavaScript animation library with multi-target, simple, and powerful API. It works with almost anything, including CSS properties, SVG or DOM properties, and other JS objects. It is similar to jQuery or any other familiar JS library you might have worked with previously. In simple terms, it makes complex follow-through and animations easy to develop. If you are looking for a library that is small in size yet works with even the simplest timeline sequences and other web elements, this is surely the ideal place to get started. Thus, the implementation of anime.JS has surged over the past years. And since its first release in 2016, it has made a huge impact on designers and developers all over.
So today at uiCookies, we wanted to look into anime.JS and its usage even further. From simple animated texts to sliders, loaders, spinners, and even design elements, we have made a list of the best anime.js examples that you can look closely at. These examples include a preview and a link to their coding snippet. So why start from scratch when you can get a head start with all these fantastic online options? And if you still decide to get started on a blank slate, these can provide some ideas and structures that might be useful.
If you are looking for more creative elements to add to your site, we also have previous blog posts on CSS cards, buttons, hover effects, and more you can check out! Now, without further ado, let’s get right onto the listing.
Path Slider Basic Demo
Now the first sample we have here of the classic anime.js implemented on a creative manner is this animated path slider. The name pretty much sums up the overall action it features. It is a creative slider that features various icons that can be further linked wkith useful pages or sites. You can use this as a navigation slider, easy access to other pages, or more. Multipurpose with the overall concept, every little details takes this to the next level. The icons are also animated to execute a hover animation, and when clicked on switches the placement to top while the others slides to accomodate the selection. While it is a pretty sophisticated element to replicate, don’t worry, you get access to the full code structure through the link down below.
Animated Boxes
This is a simple yet creative way to implement anime.js component onto your site. It features plenty of cubic elements designed to execute almost flawless animation and behavior that is super engaging, to say the least. All the rectangular cubes are placed to form a perfect square. And with each flow of movement, these combined create a wave-like effect. The creator here has used the linear ease in and out effect to achieve a different result for variations. All in all, it is a great way to learn the simplest of mechanisms in full depth; we recommend you look at the code structure through the link below.
Anime.js Sample
You can add A vibrant, colorful, super dramatic component to the site for that creative flair, this is another great anime.js sample you can try out. It is a simple transition of shapes and color schemes to achieve a super engaging result. From simple colored dots transitioning to a full circle and then a square, while maintaining the circling movement, every little detail here is carefully crafted. Even the color schemes are selected with a vibrant touch to perfectly compliment the overall visuals.
Line Drawing
To start off the list, this is a classic text animation that you can use for the logo, loader or anything. The neon hollow texts on a plain black background are soothing enough. But using anime.js “Dashoffs” and “Ease In Out Sine” effect for the transition, the animation is super smooth. Following the path created using HTML, minimal CSS is used. Follow the link below to get a better view of their coding structure. While the texts, their color, fonts, and style are pre-defined, you can take inspiration and create you own custom animated texts.
SVG Morphing with Anime.JS
This is a page transition effect created using SVG, anime.js, and CSS, complete with animated buttons. Starting from a simple background with a button, it features a simple fold-in effect to reveal the rest of the content alongside the button to come back to the previous page. The creator has used CSS and HTML to get the basics and added anime.js to get extra smooth transitions. Even the buttons execute a smooth hover effect and change placement along with the change in the background.
Hand Written SVG text animation
Now this anime.js example experiments with the handwritten text effect. The creator using CSS and HTML alongside JS has created this fantastic result. With a neutral color scheme with the background and the font, the result is mesmerizing. The creative font adds that extra flair of creativity. Users can easily set the style, color, animation path, and other smaller details if they wish to when implementing on their site. The great thing is that this animation works in a loop but you can easily end it on a static position if you prefer. Follow the link below to view the full snippet of the coding structure used.
Card Flip
Now, this is a more advanced anime.js example that uses various elements to get the 3D flip effect. This is the perfect addition to any site to use as a content-reveal element. Or, if you want, this can be the start of your next creation with a head start no matter what you aim for. The creator has used HTML cards to add extra detail and animation to take it to the next level. For starters, CSS has defined each character’s color schemes, font styles, width, and margin. But the stunning transition is what takes the cake! Using anime.js effects, the card flips in a full 3D 180 flip, revealing the content behind it.
Click on the card again, and it returns to its original position. The great thing about the structure’s simplicity is that it is highly adaptable and flexible enough for users to make changes later.
Modern Retro IBM Think
Aiming for a more retro and modern appeal with the looks and the final result, the creator of this anime.js example has given us more than enough to better understand the structure. It starts with simple, colorful, and animated dots, which change their placements and their length to form the word think. While this is a great way to reveal any professional logos, it might be a bit on the complex side. The word think is just an example as you can replace it with anything you want as all the changes you make are valid.
Animation with Anime JS
A simple and clean animated spinner and texts, this anime.js experiments with multiple ailments into one. It starts with a CSS spinner or loader, which then transforms into the animated text. The text showcases only a snippet view but expands to full view when hovered over. Another interesting element is also the animated arrow icon. While everything else is static, the arrow follows a constant animated flow. Now, when clicked on the screen, a sidebar appears on the right, which further contains details and links to social profiles. This is a simple and effective example of anime.js profile card that you can easily implement with an understanding of basic coding. The peachy and elegant color schemes used also add to the overall outlook.
Preloader with Anime Js
Now, talking about creative and innovative additions to any website, this is an anime.js example of a stunning pre-loader. It is simple with the movement as well as the icons used. To keep things interesting, different colors are used for each icon. However, the background is kept simple, focusing mainly on the icons itself. All the icons start in a single line while transforming into a square when changing placements. Thanks to the anime.js library, the whole animation is quite simple and clean. Follow the link below to get the full preview of the codes used.
Floating Draggable Menu
Now, this is yet another great use of anime.js on a site, as the creator has managed to create an amazing floating menu. Resembling the style and design structure of a floating menu on iPhones and Android, this menu is pretty advanced. The simple menu icon on a circle works as a key element, while the rest of the components inside appear only when clicked on. Various colored spheres are used for different actions to differentiate one from the other. Another stunning feature added with anime.js is the draggable option.
The viewers can easily drag the icon wherever they want on a screen. The rest of the icons follow the main menu icon, all differing in speed, creating an almost rainbow effect with the various colors. Perfect for adding that creative element on any site, app, or more, get the full view of the codes through the link below.
Logo Animation
This creative, unique, and pretty colorful logo animation is another amazing addition to our list of anime.js collections. Using all the color gradients to achieve mesmerizing typography, the creator has taken it a step further with animation. Starting with a simple circle bouncing and revealing the whole font/logo, it cannot improve! Another cool feature is the click effect it executes. When clicked anywhere on the screen, it displays a colorful burst of colors resembling a firework. This can be a great addition to your site, whether you want to use it as an animated logo or loader. However, you might consider making a few changes here and there to add that custom feel.
Color Changing
Talking about creative click effects, this is another great variation of anime.js examples you can easily implement on your site. While the ones we mentioned above might use various elements and components to get an amazing end result, the creator here has managed to keep things minimal. You can use it as a page transition or simply add the click effect for users to enjoy. Whatever the case, the anime.js is used to add that extra appealing color-changing effect on the background. Using the classic Splice and Page Fill effect and experimenting with various colors, this is yet another great way to add that touch of creativity to your site or your next project. And because this example is simple to understand and replicate, this can be a great start to learning anime.js.
SVG Sphere with Anime JS
A soothing and visually pleasing, this is yet another smooth and clean anime.js example we have in line for you. The creator has used a simple sphere as a base adding an animated linear gradient to keep things interesting. Playing with shadows, lights and shading, the sphere depicts an almost realistic effect. Each of the sections depicts a smooth transition all following the pre-defined path. The contrasting reddish hue with the linear animation makes it even more appealing for the viewers.
Snake Highlight
A simple contact form or a login page, can be more than just that. And this anime.js example showcases exactly that. Here, the users have created a material design card-based login form. Three different cards are stacked atop one another to create that 3D feel. However, this design highlights the gradient neon line when users click on the specific form field. The line depicts the movement of a snake when changing placement from one section to the other, hence the name. All of these elements, including the cards, fonts, details, and color schemes, are flexible and can be adjusted according to the user’s needs.
Anime JS Submit Button
Now for a more innovative idea to implement onto any website, whether personal or professional, this is a great anime.js example. If you have added submit or action buttons anywhere on your site, why not take it a notch further? The creator has creatively used various ailments to achieve that purpose-focused design. Simple and creative, the button transforms into a loading bar before finally changing to a circle with a checkmark. It showcases a whole process from start to completion. Using anime.js, the creators have added all the animating factors, including the slide-in, stroke, and smooth transition.
Morphing Loader Spinner
Combining HTML and CSS along with anime.js, this is yet another great example of an animated preloader or spinner. Morphing from various shapes while rotating in a loop, this is a perfect engaging element you can add to your site. From a sphere to a square to a triangle to some random-edged shapes, several color palettes are used to add that extra appeal. A shadow is added under the shapes to give it a more interesting touch. Even the shadows are animated to follow the shape above it. The color changes with the shapes are extra smooth.
Scramble Text Animation JS
Modern, advanced, and digital in all ways, this anime.js example is a stunning way to introduce text-based content to users in an appealing way. This is the perfect option for quotes, slogans, and any other text format. Using a plain and simple background color, the highlight of it all is the animated text.
Simple Slider using Anime JS
This slider version of anime.js examples makes this a fabulous result. Using a simple slide-in and-out effect, the slider works its navigation. However, the elevating factor here is the color transition with each slide. The images are placed horizontally, adding creative text design to stylize the slider further. Complete with CSS, HTML, and Anime.js, this is a great way to use anime.js effects and animations.
Charming JS
Another one in the logo generation and reveal niche, this is a great way to add in that extra touch of finesse to any site. Whether you add in your logo, use it as a loader or more, this design is animated in a way that it is extremely versatile. And the creative use of the animation and hover effects is super-engaging for anyone who lands on the site. Although a bit on the complex coding style, once you get the hang of it, there is no going back. The characters are coded to display a mesmerizing hover effect using the charming.JS. Enjoy the full snippet of the codes following the link down below. Colorful, super engaging, and certainly charming as the codes used, this simple implementation can do wonders for your site.
Typing Animation JS
Just as the name would have it, this typing animation js is another simple yet effective way to implement anime.js animations. It replicates the effect of typing out anything on a screen. The use of minimal and monochrome color palette is aesthetically pleasing. The codes used are all clean and well-commented getting the effective result immediately. As the design is so simple, it fits every sites no matter what. And to make it even more custom and edit it further, a few tweaks are more than enough. Who said, it always gotta be complex to be engaging?
Click and Drag Counter
Now for those looking to add purposeful design and element, this amazing use of anime.js. The creator here has made use of different ideas and styles to get this draggable counter. With a simple click, users can easily move the element anywhere on the screen. Like any counter, the high and the low ends are all pre-defined. Two navigational icons on and under the counter make it easier for the users to define the number. Using a clean and elegant color palette with pink and peachy hues, the result is pleasing to the eyes.
Animated Hexagon Circle Logo
Now, this is an anime.js example designed to be a logo or a loader for any websites out there. It starts as a plain white background, where the shapes hexagon and circle is aimed to slide down while revealing the rest of the text logo. The button below the animated logo features the restart effect when clicked on. Using JS, HTML and CSS, the creator has made sure to get a smooth running result. An awesome way to integrate anime.js onto your site, why not try this out today?
SVG Illustration
This variation can be used as an engaging component on your site to keep things interesting. It features an animated SVG card designed to move in a continuous loop. The anime.js here creates a screen scroll effect with creative icons and a colorful palette. Visually pleasing, you can use this as a loader, creative element, or anything you please. While the structure is sophisticated, you can follow the link below to get a closer look.
Anime.Js Playstation Loader
Talking about creative loaders, this example is another great way to integrate anime.js onto your site. Here various icons that depicts the button on a PlayStation game are animated in a creative manner. The icons feature a unique set of movements on a continuous loop as a traditional loader. It spins and rests alternatively as a square and a vertical line. Using the anime.js codes alongside the CSS and HTML, the result is stunning. It is fully responsive, meaning the whole structure adjusts to the screen size displayed.
Text Transition
Another great way to introduce your contents while keeping your users engaged is this text transition. Using simple HTML, CSS and JS, the creator has created this amazingly mesmerizing result. The texts seem to slide down and dissolve into the background. When appearing again, these texts repeat the effect but in an opposite manner. Overall, a great way to keep your users hooked onto your site, we sure think this anime.js example is worth a try here.
Diagonal Slideshow
Now, this is a design that is ideal for portfolios and gallery-based websites. For that unique sense of styling, the creators have implemented anime.js for this stunning result. It is completely responsive and visually engaging. Implemented with HTML, CSS, and anime.js, the whole design runs smoothly, to say the least. It starts with a simple diagonal-placed thumbnail gallery alongside the title. When clicked on the next and previous buttons, these are animated to appear on the screen accordingly. Another subtle addition here is the Explore button, which offers a simple hover-and-click effect.
Timeline Seek Anime.js Example
This scroll effect is another creative way to add anime.js in a simple, subtle, yet effective manner. A great way to keep things engaging while your users scroll through your site, this design is also completely responsive. The overall interface is designed with HTML and CSS elements animated with anime.js. It starts as a simple screen with elements placed strategically, which then changes to a different color scheme and a different design. Look at the whole code snippet and get a head start with your next project.
