DEV Community

Cover image for Enhance Your Web Projects with Sphere Animations Using EldoraUI 🚀

Enhance Your Web Projects with Sphere Animations Using EldoraUI 🚀

Introduction

Animations have become an essential part of modern web design, adding life and interactivity to static interfaces. In this post, I’ll walk you through creating a Sphere Animation component using the lightweight and versatile Anime.js library. Whether you're a beginner or an experienced developer, this guide will help you integrate visually captivating animations into your projects.

Image description

Prerequisites

Before diving into the implementation, ensure you have the following:

  • Basic understanding of React.js and TypeScript.
  • Node.js installed on your system.

Getting Started

Step 1: Install Dependencies

First, install animejs and its TypeScript types using npm:

npm install --save-dev animejs @types/animejs  
Enter fullscreen mode Exit fullscreen mode

Step 2: Add the Component

Create a new file named sphereanimation.tsx inside your components directory and paste the following code:

import React, { useEffect } from 'react';
import anime from 'animejs';

const SphereAnimation = () => {
  useEffect(() => {
    anime({
      targets: '.sphere',
      translateY: [-40, 40],
      direction: 'alternate',
      loop: true,
      easing: 'easeInOutSine',
    });
  }, []);

  return (
    <svg className="sphere" width="100" height="100" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="40" fill="skyblue" />
    </svg>
  );
};

export default SphereAnimation;
Enter fullscreen mode Exit fullscreen mode

This component renders an SVG circle and animates it vertically using Anime.js.

Step 3: Integrate into Your Project

Now, import the SphereAnimation component into your application and use it:

import SphereAnimation from './components/sphereanimation';

function App() {  
  return (  
    <div style={{ textAlign: 'center', marginTop: '2rem' }}>  
      <h1>Dynamic Sphere Animation</h1>  
      <SphereAnimation />  
    </div>  
  );  
}  

export default App;  
Enter fullscreen mode Exit fullscreen mode

Customization

Anime.js makes it incredibly easy to customize animations. You can tweak properties like duration, easing, or even add additional effects like rotation or color changes. For example:

anime({  
  targets: '.sphere',  
  translateY: [-40, 40],  
  scale: [1, 1.5],  
  direction: 'alternate',  
  loop: true,  
  easing: 'easeInOutSine',  
});  
Enter fullscreen mode Exit fullscreen mode

Why Use Sphere Animation?

  • Simplicity: Adding animations doesn’t need to be complicated.
  • Customization: Tailor animations to match your project’s theme.
  • Lightweight: Anime.js is optimized for performance, ensuring smooth animations.
  • TypeScript-Friendly: With type definitions, you get a better developer experience.

Demo

Check out a live demo of the Sphere Animation here.

Final Thoughts

Animations elevate the user experience by adding polish to your application. The Sphere Animation component is just the beginning—Anime.js can handle much more complex animations. Start small, experiment, and bring your designs to life!

If you found this guide helpful, feel free to share your thoughts or showcase your animations in the comments. Happy coding! 🎉

About the Author

Hi, I’m Karthikeya Varma, a passionate full-stack developer exploring the intersection of creativity and code. Check out more of my work at GitHub.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

đź‘Ą Ideal for solo developers, teams, and cross-company projects

Learn more

đź‘‹ Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay