65+ Anime JS Examples

Last Updated on by in JavaScript
Anime JS Examples

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

Age calculator tool

🎂✨ Discover your age in detail and with countdown to your next birthday with fun facts! 🎈🎉

Calculate your age now!
Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.