React Coin Celebration Animation Component

Introduction

Today, we’ll explore how to create a spectacular coin celebration effect, similar to winning celebrations in casino games. This effect includes coins bursting outward and flying to a target point, accompanied by light effects and a backdrop animation.

Try to dive into the deep research demo on Playground

Technologies Used

ReactJS: UI and state management
Framer Motion: Smooth animations
TailwindCSS: Styling
Lodash: Utility functions

Prerequisites

Basic understanding of React Hooks (useState, useEffect)
Familiarity with TailwindCSS
Basic knowledge of animations and transforms

Component Analysis

1. Particle System

const ParticleSystem = ({ totalParticles, animatedCount, isActive, gcRef, onFirstCoinReachTarget }) => {
    // ... code
}

Main component managing the entire particle system. Props:

totalParticles: Total number of coins
animatedCount: Number of animated coins
gcRef: References to target points
onFirstCoinReachTarget: Callback when first coin reaches target

2. Animation Structure

a. Backdrop Effect

<motion.div
    className="fixed inset-0 bg-black/90 z-10"
    initial={{ opacity: 0 }}
    animate={{ 
        opacity: isVisibleGC ? 0.9 : 0,
        display: isVisibleGC ? "block" : "none"
    }}
    transition={{
        duration: 0.2,
        ease: "easeInOut"
    }}
/>

Creates a dark background with 0.9 opacity
Smooth fade in/out animation

b. Particle Animation

const calculateExplosionPath = (position, index, total) => {
    // Calculate particle path
    return {
        initial: { x: 0, y: 0, scale: 0.1 },
        explosion: { x: explosionX, y: explosionY, scale: 0.7 },
        collection: { x: locationX, y: locationY, scale: 0.3 }
    };
};

Animation divided into three phases:

Initial: Starting position
Explosion: Burst outward
Collection: Flying to target

3. Animation Techniques

a. Sequence Player

const Particle = ({ frames, isAnimated }) => {
    const [currentFrame, setCurrentFrame] = useState(() => 
        Math.floor(random() * frames.length - 10)
    );

    useEffect(() => {
        if (isAnimated) {
            const interval = setInterval(() => {
                setCurrentFrame(prev => (prev + 1) % frames.length);
            }, 40);
            return () => clearInterval(interval);
        }
    }, [isAnimated, frames.length]);
    
    return <motion.img src={frames[currentFrame]} alt="particle" />;
};

Creates animation by switching frames
40ms interval for 25fps
Random start frame for variety

b. Timing Control

const timing = {
    delay: index * 0.015,  // Delay between coins
    duration: 1.5         // Flight duration
};

Incremental delay creates sequential effect
Duration controls flight speed

Tips and Tricks

Performance Optimization

// Use React.memo to prevent unnecessary re-renders
const Particle = React.memo(({ frames, isAnimated }) => {
    // ... code
});

Dynamic Positioning

const getCircularPosition = (innerRadius, outerRadius) => {
    const angle = random() * Math.PI;
    const r = Math.sqrt(random() * (outerRadius ** 2 - innerRadius ** 2) + innerRadius ** 2);
    return {
        x: r * Math.cos(angle),
        y: r * Math.sin(angle)
    };
};

Generates random positions in a circle
Ensures even distribution

Cleanup

useEffect(() => {
    let mounted = true;
    let timeouts = [];
    
    // ... code
    
    return () => {
        mounted = false;
        timeouts.forEach(clearTimeout);
    };
}, [isActive]);

Cleans up timeouts to prevent memory leaks
Checks mounted state before updates

Conclusion

This effect combines multiple techniques:

Particle systems
Frame-based animation
Motion transitions
Dynamic positioning
Timing control

For smooth effects, remember to:

Synchronize animation timings
Properly clean up resources
Optimize performance with React.memo
Use Framer Motion for complex animations

Further Learning Resources

This article helps you understand how to build a complex effect from basic concepts. Experiment and create your own variations!

Bonus Tips

Use transform instead of position properties for better performance
Implement progressive enhancement for slower devices
Consider adding sound effects for more impact
Test on different screen sizes and devices
Use requestAnimationFrame for smooth animations
Consider adding error boundaries for robustness

Remember, great animations enhance user experience but should never interfere with functionality. Always prioritize performance and accessibility in your implementations.

Post Views: 14

React Coin Celebration Animation Component | Interactive Particle Effects