In the dynamic realm of web development, the quest for captivating animations that seamlessly integrate into user interfaces is ever-evolving. Enter Anime.js, a powerhouse animation library renowned for its versatility and simplicity. Showcasing a collection of 65+ mesmerizing anime.js animation examples, Anime.js sets the benchmark for modern web animation.
From subtle transitions to eye-catching effects, Anime.js exemplifies the artistry of motion on the web. Each animation example is curated from noble platforms like CodePen and GitHub. With keywords like “Animation Library” and “JavaScript Animations” leading the charge, this curated compilation caters to developers, designers, and enthusiasts alike. But what sets Anime.js apart from current animation styles?
First and foremost, Anime.js transcends the limitations of traditional CSS animations with its lightweight yet robust framework. This means smoother animations, enhanced performance, and unparalleled flexibility. Whether you’re crafting a sleek portfolio or revamping a corporate website, Anime.js empowers you to breathe life into your creations effortlessly.
Delve into the vast array of examples and witness firsthand the transformative power of Anime.js. From interactive elements to dynamic page transitions, each example showcases the versatility and ingenuity of this animation library. Whether you’re a seasoned developer seeking to push the boundaries of web animation or a novice eager to explore the possibilities, Anime.js has something for everyone.
So, why wait? Embark on a journey of discovery and unlock the potential of anime.js. With its intuitive syntax, comprehensive examples, and thriving community, Anime.js paves the way for a new era of web animation. Explore the examples, unleash your creativity, and let Anime.js propel your projects to new heights.
1. Mobile Planet gallery
See the Pen
Mobile Planet gallery by Simone Bernabè (@simoberny)
on CodePen.
Author: Simone Bernabè @simoberny
Links: Source Code / Demo
Created on: February 23, 2018
Made with: HTML, CSS(SCSS), JS
2. Flower Timeline
See the Pen
Flower Timeline by Gabriele Corti (@borntofrappe)
on CodePen.
Author: Gabriele Corti @borntofrappe
Links: Source Code / Demo
Created on: April 5, 2020
Made with: HTML, CSS, JS
3. Easings animations with anime.js
See the Pen
Easings animations with anime.js by Julian Garnier (@juliangarnier)
on CodePen.
Author: Julian Garnier @juliangarnier
Links: Source Code / Demo
Created on: January 8, 2019
Made with: HTML, CSS, JS
4. Anime.js Ease Visualizer
See the Pen
Anime.js Ease Visualizer by Julian Garnier (@juliangarnier)
on CodePen.
Author: Julian Garnier @juliangarnier
Links: Source Code / Demo
Created on: February 23, 2017
Made with: HTML, CSS, JS
5. Micro Interactions (Online Status)
See the Pen
Micro Interactions (Online Status) by sandeep.io (@letsandeepio)
on CodePen.
Author: sandeep.io @letsandeepio
Links: Source Code / Demo
Created on: April 13, 2019
Made with: HTML, CSS, JS
6. Pokemon Go – ZingTouch x Anime.js
See the Pen
Pokemon Go – ZingTouch x Anime.js by ZingChart (@zingchart)
on CodePen.
Author: ZingChart @zingchart
Links: Source Code / Demo
Created on: July 12, 2016
Made with: HTML, CSS(SCSS), JS
7. Login Page Anime.js
See the Pen
Login Page Anime.js by Swarup Kumar Kuila (@uiswarup)
on CodePen.
Author: Swarup Kumar Kuila @uiswarup
Links: Source Code / Demo
Created on: August 5, 2020
Made with: HTML, CSS, JS
8. Happy New Year 2023
See the Pen
Happy New Year 2023 by Swarup Kumar Kuila (@uiswarup)
on CodePen.
Author: Swarup Kumar Kuila @uiswarup
Links: Source Code / Demo
Created on: December 3, 2019
Made with: HTML, CSS, JS
9. anime.js pong
See the Pen
anime.js pong by Te Vallee (@fobabett)
on CodePen.
Author: Te Vallee @fobabett
Links: Source Code / Demo
Created on: May 18, 2017
Made with: HTML, CSS, JS
10. Thank You Animation
See the Pen
Thank You Animation by Gabriele Corti (@borntofrappe)
on CodePen.
Author: Gabriele Corti @borntofrappe
Links: Source Code / Demo
Created on: July 5, 2019
Made with: HTML, CSS, JS
11. Floatting Draggable Menu (Messenger like)
See the Pen
Floatting Draggable Menu (Messenger like) by Andy Pagès (@andyNroses)
on CodePen.
Author: Andy Pagès @andyNroses
Links: Source Code / Demo
Created on: August 17, 2016
Made with: HTML, CSS(SCSS), JS
12. Bouncy Line SVG
See the Pen
Bouncy Line SVG by Nelson Rodrigues (@nelsonr)
on CodePen.
Author: Nelson Rodrigues @nelsonr
Links: Source Code / Demo
Created on: September 30, 2020
Made with: HTML, CSS(SCSS), JS
13. Back2School SVG Animation w/ anime.js
See the Pen
Back2School SVG Animation w/ anime.js by Yasio (@Yasio)
on CodePen.
Author: Yasio @Yasio
Links: Source Code / Demo
Created on: August 28, 2018
Made with: HTML, CSS(SCSS), JS(Babel)
14. Anime.js v2.0 logo animation
See the Pen
Anime.js v2.0 logo animation by Julian Garnier (@juliangarnier)
on CodePen.
Author: Julian Garnier @juliangarnier
Links: Source Code / Demo
Created on: February 23, 2017
Made with: HTML, CSS, JS
15. Julian’s Grid
See the Pen
Julian’s Grid by William Staudenmeier (@WilliamStaudenmeier)
on CodePen.
Author: William Staudenmeier @WilliamStaudenmeier
Links: Source Code / Demo
Created on: February 23, 2023
Made with: HTML, CSS, JS
16. Anime.js Fireworks canvas demo
See the Pen
Anime.js Fireworks canvas demo by Julian Garnier (@juliangarnier)
on CodePen.
Author: Julian Garnier @juliangarnier
Links: Source Code / Demo
Created on: February 23, 2017
Made with: HTML, CSS, JS
17. Bike to School
See the Pen
Bike to School by Mariusz Dabrowski (@MarioD)
on CodePen.
Author: Mariusz Dabrowski @MarioD
Links: Source Code / Demo
Created on: September 3, 2017
Made with: HTML, CSS, JS(Babel)
18. SVG icon animations with Anime.js
See the Pen
SVG icon animations with Anime.js by Natalia Davydova (@nat-davydova)
on CodePen.
Author: Natalia Davydova @nat-davydova
Links: Source Code / Demo
Created on: February 3, 2020
Made with: HTML(Pug), CSS(SCSS), JS(Babel)
19. Specific property parameters – anime.js
See the Pen
Specific property parameters – anime.js by Julian Garnier (@juliangarnier)
on CodePen.
Author: Julian Garnier @juliangarnier
Links: Source Code / Demo
Created on: June 21, 2016
Made with: HTML, CSS, JS
20. Anime.js SVG CSS Filter
See the Pen
☠️ – Anime.js SVG CSS Filter by vainsan (@vainsan)
on CodePen.
Author: VAINSAN @vainsan
Links: Source Code / Demo
Created on: November 30, 2020
Made with: HTML, CSS, JS
21. Letterize.js + Anime.js example #2
See the Pen
Letterize.js + Anime.js example #2 by Wojciech Krakowiak (@WojciechWKROPCE)
on CodePen.
Author: Wojciech Krakowiak @WojciechWKROPCE
Links: Source Code / Demo
Created on: February 14, 2020
Made with: HTML, CSS, JS
22. Smoothie App
See the Pen
Smoothie App by Gabriele Corti (@borntofrappe)
on CodePen.
Author: Gabriele Corti @borntofrappe
Links: Source Code / Demo
Created on: June 30, 2019
Made with: HTML, CSS, JS
23. Advanced staggering with anime.js
See the Pen
Advanced staggering with anime.js by Julian Garnier (@juliangarnier)
on CodePen.
Author: Julian Garnier @juliangarnier
Links: Source Code / Demo
Created on: January 8, 2019
Made with: HTML, CSS, JS
24. Modern retro – IBM THINK
See the Pen
Modern retro – IBM THINK by Mikael Ainalem (@ainalem)
on CodePen.
Author: Mikael Ainalem @ainalem
Links: Source Code / Demo
Created on: June 18, 2017
Made with: HTML, CSS, JS
25. Hand written SVG text animation
See the Pen
Hand written SVG text animation by Matthew Ellis (@mellis84)
on CodePen.
Author: Matthew Ellis @mellis84
Links: Source Code / Demo
Created on: March 4, 2018
Made with: HTML, CSS(SCSS), JS(Babel)
26. anime.js V3 logo animation
See the Pen
anime.js V3 logo animation by Julian Garnier (@juliangarnier)
on CodePen.
Author: Julian Garnier @juliangarnier
Links: Source Code / Demo
Created on: January 7, 2019
Made with: HTML, CSS, JS
27. Ghost Boo-sters – the game
See the Pen
Ghost Boo-sters ???? – the game ???? by Yasio (@Yasio)
on CodePen.
Author: Yasio @Yasio
Links: Source Code / Demo
Created on: October 5, 2018
Made with: HTML(Pug), CSS(SCSS), JS(Babel)
28. SVG sphere animation with anime.js
See the Pen
SVG sphere animation with anime.js by Julian Garnier (@juliangarnier)
on CodePen.
Author: Julian Garnier @juliangarnier
Links: Source Code / Demo
Created on: January 8, 2019
Made with: HTML, CSS, JS
29. Morphing SVG shape / blob (anime.js)
See the Pen
Morphing SVG shape / blob (anime.js) by Philip (@wiseoldman)
on CodePen.
Author: Philip @wiseoldman
Links: Source Code / Demo
Created on: January 4, 2019
Made with: HTML, CSS(SCSS), JS
30. Animated Hexagon Circle Logo
See the Pen
Animated Hexagon Circle Logo by Ryan Mulligan (@hexagoncircle)
on CodePen.
Author: Ryan Mulligan @hexagoncircle
Links: Source Code / Demo
Created on: July 16, 2018
Made with: HTML, CSS(SCSS), JS
31. Animated Svg illustration with Anime.js
See the Pen
Animated Svg illustration with Anime.js by Artem (@fitzsyke)
on CodePen.
Author: Artem @fitzsyke
Links: Source Code / Demo
Created on: June 18, 2018
Made with: HTML, CSS(Sass), JS
32. Submit Button (Anime.js)
See the Pen
Submit Button (Anime.js) by Andrew Millen (@andrewmillen)
on CodePen.
Author: Andrew Millen @andrewmillen
Links: Source Code / Demo
Created on: June 10, 2017
Made with: HTML, CSS(SCSS), JS
33. Layered animations with anime.js
See the Pen
Layered animations with anime.js by Julian Garnier (@juliangarnier)
on CodePen.
Author: Julian Garnier @juliangarnier
Links: Source Code / Demo
Created on: January 8, 2019
Made with: HTML, CSS, JS
34. SVG The Bomb
See the Pen
SVG The Bomb by Gabriele Corti (@borntofrappe)
on CodePen.
Author: Gabriele Corti @borntofrappe
Links: Source Code / Demo
Created on: July 25, 2019
Made with: HTML, CSS, JS
35. 404 error page
See the Pen
404 error page by Swarup Kumar Kuila (@uiswarup)
on CodePen.
Author: Swarup Kumar Kuila @uiswarup
Links: Source Code / Demo
Created on: February 7, 2020
Made with: HTML, CSS, JS
36. Preloader with Anime.js
See the Pen
Preloader with Anime.js by Kevin Konrad Henriquez (@kkhenriquez)
on CodePen.
Author: Kevin Konrad Henriquez @kkhenriquez
Links: Source Code / Demo
Created on: February 26, 2017
Made with: HTML(Haml), CSS(SCSS), JS
37. Card Flip
See the Pen
Card Flip by Marcos Paulo (@hellomp)
on CodePen.
Author: Marcos Paulo @hellomp
Links: Source Code / Demo
Created on: January 10, 2018
Made with: HTML, CSS, JS
38. anime.js stress test
See the Pen
anime.js stress test by Julian Garnier (@juliangarnier)
on CodePen.
Author: Julian Garnier @juliangarnier
Links: Source Code / Demo
Created on: June 27, 2016
Made with: HTML, CSS, JS
39. Switch
See the Pen
Switch by kalyada (@kLeosrisook)
on CodePen.
Author: kalyada @kLeosrisook
Links: Source Code / Demo
Created on: July 26, 2020
Made with: HTML, CSS, JS(Babel)
40. Anime.js + ScrollMagic Scroll Based Animations
See the Pen
Anime.js + ScrollMagic Scroll Based Animations by Rex Bullington (@rexjbull)
on CodePen.
Author: Rex Bullington @rexjbull
Links: Source Code / Demo
Created on: October 19, 2020
Made with: HTML, CSS, JS
41. anime.js grid staggering demo
See the Pen
anime.js grid staggering demo by Julian Garnier (@juliangarnier)
on CodePen.
Author: Julian Garnier @juliangarnier
Links: Source Code / Demo
Created on: July 25, 2019
Made with: HTML, CSS, JS
42. Color Changin’
See the Pen
Color Changin’ by Alex Zaworski (@alexzaworski)
on CodePen.
Author: Alex Zaworski @alexzaworski
Links: Source Code / Demo
Created on: August 26, 2016
Made with: HTML, CSS(SCSS), JS
43. Staggering Animation With Anime.js — Week 18/52
See the Pen
staggering animation with anime.js — week 18/52 by Mert Cukuren (@knyttneve)
on CodePen.
Author: Mert Cukuren @knyttneve
Links: Source Code / Demo
Created on: May 1, 2019
Made with: HTML(Pug), CSS(SCSS), JS(Babel)
44. Product delivery status card for website
See the Pen
Product delivery status card for website by Aryankapoor (@codewitharyann)
on CodePen.
Author: Aryankapoor @codewitharyann
Links: Source Code / Demo
Created on: December 14, 2020
Made with: HTML, CSS, JS
45. Banksy Shredder
See the Pen
Banksy Shredder by Lee Martin (@leemartin)
on CodePen.
Author: Lee Martin @leemartin
Links: Source Code / Demo
Created on: October 7, 2018
Made with: HTML, CSS, JS
46. Stepper Iteration with Anime JS
See the Pen
Stepper Iteration with Anime JS by Valery Alikin (@AlikinVV)
on CodePen.
Author: Valery Alikin @AlikinVV
Links: Source Code / Demo
Created on: December 22, 2018
Made with: HTML, CSS(SCSS), JS
47. SVG Morphing with Anime.js
See the Pen
SVG Morphing with Anime.js by Paolo Duzioni (@Paolo-Duzioni)
on CodePen.
Author: Paolo Duzioni @Paolo-Duzioni
Links: Source Code / Demo
Created on: August 28, 2018
Made with: HTML(Pug), CSS(SCSS), JS(Babel)
48. Path Slider Basic Demo
See the Pen
Path Slider Basic Demo by lmgonzalves (@lmgonzalves)
on CodePen.
Author: lmgonzalves @lmgonzalves
Links: Source Code / Demo
Created on: March 8, 2018
Made with: HTML, CSS(SCSS), JS
49. Getting Familiar With Anime.js [Line Drawing]
See the Pen
Getting Familiar with Anime.js [Line Drawing] by Dusko Stamenic (@DuskoStamenic)
on CodePen.
Author: Dusko Stamenic @DuskoStamenic
Links: Source Code / Demo
Created on: September 9, 2018
Made with: HTML, CSS, JS
50. Snake highlight
See the Pen
Modern retro – IBM THINK by Mikael Ainalem (@ainalem)
on CodePen.
Author: Mikael Ainalem @ainalem
Links: Source Code / Demo
Created on: February 12, 2018
Made with: HTML, CSS, JS
51. anime.js Dulst Achievement Animation
See the Pen
anime.js Dulst Achievement Animation by Rowanism (@Rowanism)
on CodePen.
Author: Rowanism @Rowanism
Links: Source Code / Demo
Created on: June 26, 2017
Made with: HTML, CSS(Stylus), JS
52. Gold Animation (Made With Mo.js And Anime.js)
See the Pen
Gold Animation (mo.js + anime.js) by Matt Rothenberg (@mattrothenberg)
on CodePen.
Author: Matt Rothenberg @mattrothenberg
Links: Source Code / Demo
Created on: February 26, 2017
Made with: HTML, CSS(SCSS), JS
53. Snake highlight
See the Pen
Basic animation – anime.js by csleh (@cslhe)
on CodePen.
Author: csleh @cslhe
Links: Source Code / Demo
Created on: June 5, 2020
Made with: HTML, CSS, JS
54. Anime.js Draft For Preloading
See the Pen
Anime.js draft for preloading by guenda (@atarasssico)
on CodePen.
Author: guenda @atarasssico
Links: Source Code / Demo
Created on: March 12, 2020
Made with: HTML, CSS, JS
55. ‘Merci Mec for the invit’ animejs version
See the Pen
‘Merci Mec for the invit’ animejs version by Julien Jolly (@Julien-Jolly)
on CodePen.
Author: Julien Jolly @Julien-Jolly
Links: Source Code / Demo
Created on: June 8, 2017
Made with: HTML, CSS, JS
56. anime.js powered 3D cards stack slider
See the Pen
anime.js powered 3D cards stack slider by Ershad (@ershad989)
on CodePen.
Author: Ershad @ershad989
Links: Source Code / Demo
Created on: February 23, 2020
Made with: HTML, CSS (SCSS), JS
57. Hand written SVG text animation
See the Pen
Hand written SVG text animation by Joseph (@Kachulio)
on CodePen.
Author: Joseph @Kachulio
Links: Source Code / Demo
Created on: April 16, 2020
Made with: HTML, CSS (SCSS), JS(Babel)
58. THREE Text Animation
See the Pen
THREE Text Animation #2 by Mario (@PoloBustilo)
on CodePen.
Author: Mario @PoloBustilo
Links: Source Code / Demo
Created on: August 21, 2020
Made with: HTML, CSS, JS
59. SVG Loader
See the Pen
SVG Loader by Kass (@kassandrasanch)
on CodePen.
Author: Kass @kassandrasanch
Links: Source Code / Demo
Created on: January 26, 2021
Made with: HTML, CSS (SCSS), JS
60. Animated Cycle Anime.js
See the Pen
Animated Cycle Anime.js by Swarup Kumar Kuila (@uiswarup)
on CodePen.
Author: Swarup Kumar Kuila @uiswarup
Links: Source Code / Demo
Created on: July 30, 2020
Made with: HTML, CSS, JS
61. Animated folder micro-interaction
See the Pen
Animated folder micro-interaction by Niels Voogt (@NielsVoogt)
on CodePen.
Author: Niels Voogt @NielsVoogt
Links: Source Code / Demo
Created on: June 15, 2020
Made with: HTML, CSS (SCSS), JS
62. anime.js Sample – demo
See the Pen
anime.js Sample – demo by yskm (@___yskm___)
on CodePen.
Author: yskm @___yskm___
Links: Source Code / Demo
Created on: August 9, 2016
Made with: HTML, CSS(SCSS), JS(Babel)
63. Animated Easter SVG Icons (via anime.js)
See the Pen
Animated Easter SVG Icons (via anime.js) by Natalia Davydova (@nat-davydova)
on CodePen.
Author: Natalia Davydova @nat-davydova
Links: Source Code / Demo
Created on: April 1, 2020
Made with: HTML(Pug), CSS(SCSS), JS(Babel)
64. Morph Clock
See the Pen
Morph Clock by El Alemaño (@elalemanyo)
on CodePen.
Author: El Alemaño @elalemanyo
Links: Source Code / Demo
Created on: March 9, 2020
Made with: HTML (Haml), CSS(SCSS), JS
65. Fork it! – Navigation & Sub-navigation
See the Pen
Fork it! – Navigation & Sub-navigation #codepenchallenge by Hussard (@hussard)
on CodePen.
Author: Hussard @hussard
Links: Source Code / Demo
Created on: August 15, 2019
Made with: HTML, CSS, JS
66. Personal Website – Anime.js
See the Pen
Personal Website – Anime.js by Sasha (@sashatran)
on CodePen.
Author: Sasha @sashatran
Links: Source Code / Demo
Created on: March 11, 2017
Made with: HTML, CSS(SCSS), JS