📌 Introduction

Hey Devs! 👋

Today marks Day 1 of my journey into learning Anime.js, a lightweight JavaScript animation library that makes adding animations to your web projects ridiculously fun and powerful.

In this article, I’ll walk you through how I animated a simple landing page using Anime.js — from setup to final smooth transitions.

🚀 What I Built

I created a simple landing page with:

  • A navigation bar
  • A hero section with a title, description, and buttons
  • A footer for credit

Then I used Anime.js to animate these sections on page load — from logo slides to button scales — to give the site a vibrant entrance.

✅ 10 Micro Tasks I Completed

  1. Setup HTML structure for the layout
  2. Designed the page using Tailwind-inspired clean CSS
  3. Integrated Anime.js via CDN
  4. Created a logo entrance animation with translateX
  5. Added staggered drop-in for navbar items
  6. Applied scaling to the title
  7. Animated text paragraphs with fade and upward motion
  8. Scaled the buttons with subtle bounce
  9. Animated the footer slide-in
  10. Polished animation timing with easing and duration

💻 Tech Stack

  • HTML5 & CSS3
  • JavaScript
  • Anime.js
  • Google Fonts (Poppins)

🔥 Projects I Created

  1. Landing Page with Anime.js Elements

    Check out this Pen I made!

  2. Smooth Intro Animation with Staggered Effects

    Check out this Pen I made!

📁 GitHub Repository

🔗 GitHub Repo — animejs_learning

Browse through the full source code and contribute if you’d like!

🧠 What I Learned

  • How to integrate Anime.js with ease
  • Animate multiple DOM elements with stagger
  • Utilize properties like translate, opacity, scale
  • Fine-tune UX with custom easing and durations

🧪 What’s Next?

This was just the start. In upcoming sessions, I plan to dive into:

  • Anime.js timelines for complex sequences
  • SVG path animations for creative motion
  • Scroll-based triggers for interactive storytelling

🙌 Final Thoughts

This experiment showed me how easy and elegant Anime.js is. If you're into frontend or just want to spice up your UIs — Anime.js deserves a spot in your toolbox.

Let’s animate the web, one pixel at a time. ✨

🧑‍💻 Author

Ashish Prajapati

🔗 GitHub

📝 Dev.to

💼 LinkedIn