✨ Anime.js Learning — Day 4: Interactivity & Event Control

Welcome to Day 4 of my Anime.js journey! Today was all about making animations interactive — controlling them via user events, adding callbacks, and even animating with scroll behavior.

🎯 What I Learned Today

✅ Topics Covered:

• onBegin, onUpdate, onComplete callbacks
• Animation control methods: play(), pause(), restart(), reverse()
• Handling DOM Events: click, hover, etc.
• Scroll-triggered animations using IntersectionObserver
• Sequencing with anime.timeline() + interactivity

💡 Concepts with Examples

anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  onBegin: () => console.log('Animation started!'),
  onUpdate: anim => console.log(`Progress: ${Math.round(anim.progress)}%`),
  onComplete: () => console.log('Animation complete!')
});

🔁 You can use hover, click, scroll, and even keyboard events to make animations come alive!

🔥 Practice Questions

🟢 Basic

1. Animate a button and log when animation starts and ends.
2. Pause an animation on hover and resume on mouseout.
3. Animate a square on click using translateX.

🟠 Intermediate

1. Use onUpdate to update progress bar width in real-time.
2. Reverse an animation with a button click.
3. Animate multiple elements with .stagger() on scroll into view.

🔴 Advanced

1. Build a gallery that animates in on scroll.
2. Animate a progress bar that fills based on scroll.
3. Create a typewriter effect that restarts on button click.
4. Make a timeline animation that pauses when scrolled out of view.

🌅 Minor Project – Sunrise Animation

A simple yet calming animation of the sun rising behind mountains using Anime.js.

Check out this Pen I made!

🌌 Major Project – Interactive Solar System 🌍

Today’s big build! A fully interactive Solar System powered by Anime.js + DOM events + scroll behavior.

✨ Features:

• Planets orbit around a glowing sun
• Hover to pause animation
• Click a planet to show animated info box
• Scroll to reveal fun facts using IntersectionObserver
• Animation lifecycle logs using onBegin, onUpdate, onComplete
• Full timeline-based sequencing for reveal elements

Check out this Pen I made!

🧠 What I Gained Today

• Learned how to make animations respond to user input
• Discovered scroll-based reveal tricks
• Became more confident using Anime.js timelines and control methods
• Built a complex multi-layered animation project!

🗣️ Developer Quote of the Day

"Every animation begins with a single frame — keep pushing pixels and you'll paint motion itself."

— Anonymous

🚀 Up Next: SVG Animations and Path Morphing (Stage 5)

Can’t wait to start animating SVG paths and building logo morph effects in Stage 5. Stay tuned!

👤 Author

Ashish Prajapati

• 💼 LinkedIn
• ✍️ Dev.to Blog
• 💻 GitHub