A five-day creative deep dive into web animations using Anime.js, where I explored interactivity, scroll-based effects, timelines, and real-world animation projects.

• 🎨 Animated landing page with scroll & load effects
• 🌅 Sunrise animation (minor project)
• 📦 Scroll-based storytelling page (major project)
• 🧠 Used callbacks, timelines, and dynamic properties
• 📊 Started working with SVGs, charts, and UI motion

• 🔧 Setup HTML/CSS layout and Anime.js via CDN
• 🎯 Slide-in logo, staggered nav items
• 🎨 Hero text fade/scale animations
• 🕹️ Button hover interaction
• 📜 Footer animation on page load

Live Demo:
➡️ Landing Page Animation

Topics Learned:

• translateX, translateY, scale, rotate, opacity, backgroundColor
• duration, delay, easing, loop, direction, autoplay

Practiced:

• Hover and click-triggered animations
• Scroll-reveal with IntersectionObserver
• Combined scale + opacity + translate for section animations

Demos:

• Button Effects
• Scroll Section Anim

Topics Covered:

• anime.timeline() for chaining steps
• add() with offsets and easing
• stagger() for cascading effects
• Combined multiple element animations into one sequence

Live Projects:

• Timeline Button
• Character Entrance

Topics Covered:

• Callbacks: onBegin, onUpdate, onComplete
• Controls: play(), pause(), reverse(), restart()
• Event listeners: hover, click, scroll
• Scroll-triggered animations with IntersectionObserver

Minor Project:

• 🌅 Sunrise Animation

Major Project:

• 📖 Scroll-Based Storytelling

Topics Explored:

• ✨ SVG path animations
• 🌀 Motion paths
• 🎲 Dynamic values using anime.random() or functions
• 🔁 Started integrating GSAP & Anime.js
• 📈 Explored animating custom charts / UI elements

Practice Sets:

• SVG icon spinner
• Motion path object fly
• Dynamic color-based bouncing balls

Now stepping into:

• 🧩 Scroll-based storytelling websites
• 🌀 Full GSAP + Anime.js combos
• 🎧 Music visualizer project
• 🧬 Component-level UI animations

🔗 GitHub: Anticoder03/animejs_learning

Ashish Prajapati

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

🎥 “Animation isn’t just movement — it’s emotion, it’s story, it’s life.”
— Ashish Prajapati