Welcome to Day 6 of my Anime.js journey!

Today kicks off a new chapter: Project Days. Instead of learning new syntax or techniques, I'm diving into building real-world examples — things like loading animations, UI elements, and scroll interactions — all powered by the magic of Anime.js.

🎯 What I Built Today

✅ Today's Focus

  • Designed 3 unique loading animations
  • Practiced SVG stroke and path animation techniques
  • Used timelines and stagger effects for smooth sequencing
  • Experimented with motion curves and easing to craft visually pleasing loaders

💡 Loaders I Designed

🌀 Loader 1 — SVG Line Dash Animation

An SVG line draws itself as if it's sketched by an invisible pen. This loader uses strokeDashoffset and a custom bezier easing to give that satisfying "tracing" effect. It's minimal yet classy — great for splash screens or product intros.

👉 Live Demo on CodePen

🔵 Loader 2 — *Text-Based *

Inspired by modern chat UIs, this loader features Text loading and fading . Created using anime.timeline() with staggered delays, this one adds a touch of rhythm and life to waiting screens.

👉 Live Demo on CodePen

🟣 Loader 3 — Advanced Circular Loader

This is where things get exciting — a more dynamic loader that combines rotation and transformation of two SVG circles. It's a step up in complexity and could work well for dashboards or analytics-heavy apps.

👉 Live Demo on CodePen

🧠 What I Learned

  • How to transform ideas into UI components using Anime.js
  • The power of timelines for controlling animation flow
  • How different easing functions change the entire "feel" of an animation
  • Why subtle animations improve real UX, not just aesthetics

🔥 Mini Challenge For You

Try these out in your own projects:

  • Make one of these loaders into a reusable React or Vue component

🗣️ Quote of the Day

"Great animation doesn’t just catch the eye—it tells a story in motion."

— A designer, somewhere on the internet

👨‍💻 Author

Ashish Prajapati

💼 LinkedIn

✍️ Dev.to Blog

💻 GitHub