Animating a Spooky Pumpkin with Anime.js 🎃

This is a submission for Frontend Challenge - Halloween Edition, CSS Art.

Inspiration

Halloween is the perfect excuse to play with CSS and animation. I wanted to create a fun, spooky pumpkin with flying bats animation using Anime.js. The goal was to explore combining CSS shapes, keyframe animations, and JS-driven motion to make a visually appealing, interactive scene.

---

Demo

Check out the live codepen demo here: Halloween Pumpkin Animation

(I have also Posted it on my website hosted on a VPS I got using a 50% discount coupon from Webaon — it was fast and easy to deploy, I happen to have extra coupons, including Webaon, Hostinger, Amazon AWS and GoDaddy, if anyone wants one!.)

---

Journey

I started by building the pumpkin and bats entirely in CSS, using border-radius, clip-path, and gradients for depth. Then, I used Anime.js to bring everything to life:

• The pumpkin gently bounces using a simple translateY animation.
• Bats fly across the screen repeatedly with random vertical offsets for a spooky effect.
• The animation loops infinitely, making it feel lively and fun.

Challenges & Learnings:

• Positioning and shaping bats with clip-path took some trial and error.
• Combining pure CSS with Anime.js made the motion smooth without heavy JS calculations.
• Deploying on a VPS was straightforward — having a live URL made it easy to share with friends and clients.

---

Code Snippet (Anime.js)

// Pumpkin bounce
anime({
  targets: '.pumpkin',
  translateY: [
    { value: -15, duration: 800 },
    { value: 0, duration: 800 }
  ],
  loop: true,
  easing: 'easeInOutSine'
});

// Bats flying
function animateBat(selector, delay) {
  anime({
    targets: selector,
    translateX: [
      { value: 300, duration: 4000 },
      { value: -300, duration: 0 }
    ],
    translateY: [
      { value: () => anime.random(-50, 50), duration: 4000 }
    ],
    loop: true,
    delay: delay,
    easing: 'linear'
  });
}

animateBat('.bat1', 0);
animateBat('.bat2', 1000);
animateBat('.bat3', 2000);

Key Takeaways

• CSS + Anime.js can create complex, interactive animations with minimal code.
• Deploying projects on a VPS makes sharing demos professional and easy.
• Combining creative coding with practical deployment is a great way to build your portfolio.