Author: Ashish Prajapati

GitHub: Anticoder03/animejs_learning

LinkedIn: Ashish Prajapati

📌 Topics Covered (Stage 2 - Core Properties & Parameters)

Today I dove deep into Anime.js's core animation properties and learned how to control the behavior of animations with various options. Here's a summary of what I explored:

✅ Core Animation Properties

  • translateX, translateY — Move elements along X and Y axis.
  • scale — Shrink or grow elements.
  • rotate — Rotate elements.
  • opacity, backgroundColor — Fade in/out and color change.

⚙️ Control Parameters

  • duration — How long the animation lasts.
  • delay — Delay before starting.
  • easing — Smoothness or style of the animation curve.
  • loop, direction — Loop the animation or play it alternate.
  • autoplay: false — Allow manual control and trigger via events.

💡 What I Practiced

I applied all of the above concepts in small, creative experiments:

  1. Scroll-triggered Animations using IntersectionObserver
  2. Combine Translate + Rotate + Scale + Opacity
  3. Sequential Button Effects using Anime.js timeline()
  4. Hover-based Button Effects
  5. Fading and bouncing animations
  6. Controlled animations on click using autoplay: false
  7. Looping animations with glow effects
  8. Easing combinations to create smooth transitions
  9. Animated entrance for sections/cards
  10. Animation triggered only once on scroll

🔨 Mini Project of the Day

I created a morphing loader animation using timeline and scale effects.

📌 Check out this Pen I made!

🌀 Scroll-Based Section Animation

This experiment brings in each .section with a smooth scroll effect — combining translateY, scale, rotate, and opacity:

📌 Check out this Pen I made!

🧠 What I Learned Today

  • How to use IntersectionObserver with Anime.js.
  • Creating timed sequences with anime.timeline().
  • Triggering animations only when needed (e.g., on scroll or click).
  • Building interactive UI elements like buttons and sections with polished animation feedback.
  • Mastery over core animation options and their real-world applications.

🚀 Up Next: Day 3 Goals

  • Dive into staggering animations for multiple elements.
  • Explore anime.set() and anime.remove().
  • Try animating SVG paths and stroke drawing.

Thanks for following along!

Let's keep the animation magic alive! ✨

#MyDaysOfAnimeJS #DevTo #WebDev #AnimeJS