# 🎯 Anime.js Learning — Day 2

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