The library requires React Native's New Architecture (Fabric), so you'll need version 0.76 or newer.

In this tutorial, you'll learn:

• How to use CSS transitions for state-driven animations

• When to use worklets for gesture and scroll interactions

• How to migrate from Reanimated 3 to 4

• Practical patterns for collapsing headers, bottom sheets, and carousels

• Performance optimization techniques

Prerequisites

You should have:

• React Native 0.76+ with New Architecture enabled

• Basic React hooks knowledge (useState, useEffect)

• Node.js and npm or yarn are installed

Table of Contents

• Installation and Setup

• Understanding the Two Approaches (CSS Animations and Worklets)

• How to Migrate from Reanimated Version 3 to Version 4

• CSS Animations Tutorial

• Worklets Tutorial

• Real-World Patterns

• Performance Optimizations

• Debugging Tips

• Conclusion

Installation and Setup

To get started, you'll need to install the required packages:

# For Expo
npx expo install react-native-reanimated react-native-worklets

# For React Native CLI  
npm install react-native-reanimated react-native-worklets
cd ios && pod install && cd ..

Update babel.config.js (the plugin must be last):

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'react-native-worklets/plugin', // Must be last
  ],
};

Then clear the cache and rebuild:

npm start -- --reset-cache
npx react-native run-ios

Understanding the Two Approaches

React Native Reanimated is an animation library that runs animations on the native thread instead of the JavaScript thread. This means your animations stay smooth even when your JavaScript code is busy processing data or handling user interactions.

Unlike React Native's built-in Animated API, Reanimated executes animation logic directly on the UI thread. This eliminates the performance bottleneck caused by communication between JavaScript and native code, which enables Reanimated to maintain 60 FPS even during complex operations.

Reanimated 4 offers two animation systems, each designed for different use cases.

CSS Animations

CSS animations work declaratively, meaning you describe what you want to happen rather than how to make it happen. You define which properties should animate (like width, color, or opacity), specify the timing and easing, then simply change the values through React state updates. Reanimated automatically handles the animation between the old and new values.

This approach excels at predictable, state-driven animations where you know both the starting and ending states. It's ideal for:

• Showing and hiding UI elements (modals, tooltips, notifications)

• Expanding and collapsing content (accordions, dropdown menus)

• Visual feedback for state changes (button hover effects, selection highlights)

• Loading indicators and progress animations

• Color and opacity transitions

Worklets

Worklets take a different approach by giving you imperative, frame-by-frame control over animations. They run on the UI thread and use "shared values" – special variables that can be accessed and modified from both JavaScript and native code without any communication overhead.

Worklets are essential for interactive animations that need to respond in real-time to user input or continuous data streams. They're best for:

• Gesture-driven interactions (drag-and-drop, swipe-to-dismiss, pinch-to-zoom)

• Scroll-linked effects (parallax images, collapsing headers, sticky elements)

• Physics-based animations (spring effects, momentum scrolling)

• Sensor-based animations (responding to device orientation)

• Any animation requiring dynamic, real-time control

Now that you understand the two approaches Reanimated offers, let's look at how to migrate from version 3 if you're already using the library.

How to Migrate from Reanimated Version 3 to Version 4

If you're currently using Reanimated 3, you'll be happy to know that version 4 maintains backward compatibility. Your existing animations using worklets, shared values, and useAnimatedStyle will continue to work without modification.

But version 4 introduces some architectural changes and removes deprecated APIs, so you'll need to make a few updates to your project configuration and code. Let's walk through the migration process step by step.

What Changed in Version 4

The most significant change is that worklets have been extracted into a separate package called react-native-worklets-core. This modular approach allows other libraries beyond Reanimated to leverage worklet functionality.

Because of this separation, you'll need to update your Babel configuration. Change the plugin from react-native-reanimated/plugin to react-native-worklets/plugin.

Version 4 also exclusively supports React Native's New Architecture (Fabric). The old Paper renderer is no longer compatible. If your project hasn't migrated to the New Architecture yet, you'll need to either upgrade to React Native 0.76+ (which has New Architecture enabled by default) or stay on Reanimated 3.x until you're ready to make that transition.

Removed APIs

Several APIs that were deprecated in version 3 have been removed in version 4. Here's what you need to replace:

• useAnimatedGestureHandler → Use the Gesture API from react-native-gesture-handler 2.x instead

• useWorkletCallback → Use useCallback with the 'worklet' directive

• combineTransition → Use EntryExitTransition.entering().exiting()

The useScrollViewOffset hook has been renamed to useScrollOffset. The old name still works but is deprecated, so update your code to use the new name.

Spring Configuration Change

The spring animation configuration has changed to feel more natural. The duration parameter now represents "perceptual duration" rather than exact milliseconds. The actual animation runs approximately 1.5 times longer than the specified duration, creating springs that feel more organic and less mechanical.

// Version 3
withSpring(100, { duration: 300 }) // Runs for exactly 300ms

// Version 4  
withSpring(100, { duration: 200 }) // Runs for approximately 300ms

If you need to maintain the exact timing from version 3, divide your duration values by 1.5.

Step-by-Step Migration Process

Here's how to migrate your project from Reanimated 3 to version 4:

Step 1: Verify your project is using React Native 0.76 or newer with New Architecture enabled. Check your iOS Podfile for ENV['RCT_NEW_ARCH_ENABLED'] = '1' and your Android gradle.properties for newArchEnabled=true.

Step 2: Install the new versions of Reanimated and the worklets package:

npm install react-native-reanimated@^4.1.0 react-native-worklets@^0.5.0

Step 3: Update your babel.config.js to use the new worklets plugin:

module.exports = {
  plugins: [
    'react-native-worklets/plugin', // Changed from react-native-reanimated/plugin
  ],
};

Step 4: Search your codebase for the removed APIs and replace them:

• Replace useAnimatedGestureHandler with the Gesture API

• Replace useWorkletCallback with useCallback and add 'worklet' directive

• Replace combineTransition with EntryExitTransition.entering().exiting()

• Rename useScrollViewOffset to useScrollOffset

Step 5: Rebuild your native apps:

cd ios && pod install && cd ..
npx react-native run-ios
# or for Android
npx react-native run-android

After completing these steps, your app should be running on Reanimated 4 with all your existing animations working as before. You're now ready to start using the new CSS animation features alongside your existing worklet-based animations. In the next section, you'll learn how to build animations using the CSS syntax.

CSS Animations Tutorial

CSS animations provide a clean, declarative way to handle transitions that are triggered by state changes. Instead of manually managing animation values, you simply declare which properties should animate and how, then update your component state – Reanimated handles the rest.

This approach is particularly powerful for animations where you know the start and end states ahead of time. It's perfect for UI elements that toggle between different visual states, like modals appearing and disappearing, buttons providing feedback on press, or content expanding and collapsing.

Basic Transitions

A transition animates the change between two property values. When you specify a property that should transition, Reanimated automatically interpolates between the old and new values over the specified duration.

Let's look at an expandable card that grows when tapped:

import React, { useState } from 'react';
import { Pressable, Text } from 'react-native';
import Animated from 'react-native-reanimated';

function ExpandableCard() {
  const [expanded, setExpanded] = useState(false);

  return (
    <Pressable onPress={() => setExpanded(!expanded)}>
      <Animated.View style={{
        width: expanded ? 300 : 200,
        height: expanded ? 200 : 100,
        backgroundColor: expanded ? '#4ade80' : '#86efac',
        transitionProperty: ['width', 'height', 'backgroundColor'],
        transitionDuration: 300,
        transitionTimingFunction: 'ease-in-out',
      }}>
        <Text>Tap to toggle</Text>
      </Animated.View>
    </Pressable>
  );
}

Here's what's happening: The card's width, height, and background color are controlled by the expanded state. The transitionProperty array tells Reanimated which properties to animate. When expanded changes, Reanimated smoothly animates from the current values to the new values over 300 milliseconds, using an ease-in-out timing function that starts slow, speeds up, then slows down again.

Keyframe Animations

While transitions handle changes between two states, keyframe animations let you define multi-step sequences with precise control over each stage. You create an object where each key represents a percentage of the animation timeline, and the value defines what properties should look like at that point.

Here's a pulsing badge that scales up and fades slightly, then returns to normal:

const pulseAnimation = {
  '0%': { scale: 1, opacity: 1 },
  '50%': { scale: 1.05, opacity: 0.8 },
  '100%': { scale: 1, opacity: 1 },
};

function PulsingBadge() {
  return (
    <Animated.View style={{
      width: 50,
      height: 50,
      borderRadius: 25,
      backgroundColor: '#ef4444',
      animationName: pulseAnimation,
      animationDuration: 2000,
      animationIterationCount: 'infinite',
    }} />
  );
}

The animation starts at 0% (normal size and opacity), grows and fades at the 50% mark, then returns to the original state at 100%. By setting animationIterationCount to 'infinite', the animation loops continuously. This creates the pulsing effect you often see on notification badges or live indicators.

Built-in Animations

Reanimated includes a collection of pre-built animations for common entrance and exit effects. These save you from writing animation configurations for standard patterns like fading, sliding, and zooming.

Here's a modal that fades in when shown and fades out when hidden:

import { FadeIn, FadeOut } from 'react-native-reanimated';

function Modal({ visible, children }) {
  if (!visible) return null;

  return (
    <Animated.View 
      entering={FadeIn.duration(300)}
      exiting={FadeOut.duration(200)}
    >
      {children}
    </Animated.View>
  );
}

The entering prop automatically applies the fade-in animation when the component mounts, and exiting applies the fade-out before unmounting. Other commonly used built-in animations include SlideInRight, SlideOutLeft (for drawer-style entrances), and ZoomIn, ZoomOut (for attention-grabbing pop-ins).

Now that you understand CSS animations for state-driven transitions, let's explore worklets for creating interactive animations that respond to user input in real-time.

Worklets Tutorial

While CSS animations excel at predefined state transitions, many animations need to respond dynamically to user input. This is where worklets come in. Worklets give you frame-by-frame control over animations, allowing them to follow gestures, scroll position, or any other real-time input source.

Interactive animations differ from CSS animations in that they don't have predefined start and end states. Instead, they continuously update based on user input. For example, a draggable element needs to follow your finger precisely as you move it – there's no way to know ahead of time where you'll drag it. This requires imperative control, where you directly manipulate animation values in response to events.

Basic Worklet Animation

Shared values are the foundation of worklet-based animations. They're special variables that exist simultaneously in both the JavaScript and UI threads, allowing you to update them from JavaScript while the UI thread reads them to update the display – all without any communication overhead.

Here's a button that scales down when pressed and bounces back when released:

import Animated, { 
  useSharedValue, 
  useAnimatedStyle, 
  withSpring 
} from 'react-native-reanimated';
import { Pressable } from 'react-native';

function BouncyButton() {
  const scale = useSharedValue(1);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));

  return (
    <Pressable
      onPressIn={() => { scale.value = withSpring(0.9); }}
      onPressOut={() => { scale.value = withSpring(1); }}
    >
      <Animated.View style={[styles.button, animatedStyle]}>
        <Text>Press Me</Text>
      </Animated.View>
    </Pressable>
  );
}

The useSharedValue(1) creates a shared value initialized to 1 (normal scale). The useAnimatedStyle hook creates a style object that depends on this shared value and runs on the UI thread. When you press the button, scale.value = withSpring(0.9) updates the shared value, and withSpring creates a spring animation to the new value. The useAnimatedStyle hook automatically re-runs, updating the transform with the new scale value.

Gesture Animations

Gestures require even tighter integration between user input and animation. The react-native-gesture-handler library provides high-performance gesture recognition that works seamlessly with Reanimated.

First, install the gesture handler:

npm install react-native-gesture-handler
cd ios && pod install && cd ..

Next, you need to wrap your app with GestureHandlerRootView. This component sets up the gesture handling system at the root of your application. Without it, gestures won't work. Think of it as activating the gesture system for your entire app:

import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* Your app content goes here */}
    </GestureHandlerRootView>
  );
}

Now you can create gesture-driven animations. Here's a box you can drag around the screen that springs back to center when released:

import { Gesture, GestureDetector } from 'react-native-gesture-handler';

function DraggableBox() {
  const offsetX = useSharedValue(0);
  const offsetY = useSharedValue(0);

  const pan = Gesture.Pan()
    .onChange((event) => {
      offsetX.value += event.changeX;
      offsetY.value += event.changeY;
    })
    .onEnd(() => {
      offsetX.value = withSpring(0);
      offsetY.value = withSpring(0);
    });

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [
      { translateX: offsetX.value },
      { translateY: offsetY.value },
    ],
  }));

  return (
    <GestureDetector gesture={pan}>
      <Animated.View style={[styles.box, animatedStyle]} />
    </GestureDetector>
  );
}

The Gesture.Pan() creates a pan gesture recognizer. The .onChange() callback fires continuously while you're dragging – event.changeX and event.changeY tell you how much the finger moved since the last frame. By adding these values to the offsets, the box follows your finger. When you lift your finger, .onEnd() fires and springs the box back to the center (0, 0).

Scroll-Linked Animations

Another common use case for worklets is creating effects that respond to scroll position, like headers that shrink as you scroll down or parallax backgrounds.

Here's a header that collapses as you scroll:

function ParallaxHeader() {
  const scrollY = useSharedValue(0);

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollY.value = event.contentOffset.y;
    },
  });

  const headerStyle = useAnimatedStyle(() => {
    const height = interpolate(
      scrollY.value,
      [0, 150],
      [200, 60],
      'clamp'
    );

    return { height };
  });

  return (
    <>
      <Animated.View style={[styles.header, headerStyle]}>
        <Text>Header</Text>
      </Animated.View>
      <Animated.ScrollView
        onScroll={scrollHandler}
        scrollEventThrottle={16}
      >
        {/* Content */}
      </Animated.ScrollView>
    </>
  );
}

The useAnimatedScrollHandler creates a scroll event handler that runs on the UI thread. Every time you scroll, it updates scrollY with the current scroll position. The interpolate function maps the scroll position to the header height – when scrollY is 0 (top of the scroll), height is 200. When scrollY reaches 150, height is 60. The 'clamp' option prevents the height from going outside this range.

With these fundamentals of CSS animations and worklets covered, let's look at how to apply them to common real-world scenarios.

Real-World Patterns

Now that you understand both CSS animations and worklets, let's combine them to build three patterns you'll frequently encounter in production apps. These examples demonstrate when to use each animation approach and how to structure your code for maintainability.

In this section, you'll learn how to build a collapsing header that shrinks as users scroll (using worklets for scroll tracking), a bottom sheet that responds to drag gestures (using worklets for gesture control), and a swipe-to-delete interaction for list items (combining worklets for gesture detection with animations for the deletion effect).

Collapsing Header

A collapsing header is a navigation bar that starts tall and shrinks as you scroll down. This pattern is popular because it maximizes content space while keeping navigation accessible. You'll use worklets here because the animation needs to follow the scroll position in real-time.

function CollapsibleHeader() {
  const scrollY = useSharedValue(0);
  const HEADER_MAX = 200;
  const HEADER_MIN = 60;

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollY.value = event.contentOffset.y;
    },
  });

  const headerStyle = useAnimatedStyle(() => ({
    height: interpolate(
      scrollY.value,
      [0, HEADER_MAX - HEADER_MIN],
      [HEADER_MAX, HEADER_MIN],
      'clamp'
    ),
  }));

  return (
    <View style={{ flex: 1 }}>
      <Animated.View style={[styles.header, headerStyle]}>
        <Text>My App</Text>
      </Animated.View>
      <Animated.ScrollView
        onScroll={scrollHandler}
        scrollEventThrottle={16}
      >
        <View style={{ height: 1000, padding: 16 }}>
          <Text>Scroll to see header collapse</Text>
        </View>
      </Animated.ScrollView>
    </View>
  );
}

This pattern tracks scroll position in scrollY and uses interpolate to map it to header height. When you're at the top (scrollY = 0), the header is 200 pixels tall. As you scroll down 140 pixels, the header shrinks to 60 pixels. The animation happens on every frame as you scroll, which is why worklets are necessary – CSS animations couldn't track scroll position this smoothly.

Bottom Sheet

A bottom sheet is a panel that slides up from the bottom of the screen, commonly used for action menus, filters, or additional content. Users can drag it to different heights or dismiss it with a swipe down. This requires worklets because it needs frame-by-frame gesture tracking.

function BottomSheet({ children }) {
  const translateY = useSharedValue(300);
  const context = useSharedValue({ y: 0 });

  const pan = Gesture.Pan()
    .onStart(() => {
      context.value = { y: translateY.value };
    })
    .onChange((event) => {
      translateY.value = Math.max(
        event.translationY + context.value.y,
        -300
      );
    })
    .onEnd((event) => {
      if (event.velocityY > 500) {
        translateY.value = withSpring(300); // Dismiss
      } else if (translateY.value > -100) {
        translateY.value = withSpring(-50); // Collapsed
      } else {
        translateY.value = withSpring(-300); // Expanded
      }
    });

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateY: translateY.value }],
  }));

  return (
    <GestureDetector gesture={pan}>
      <Animated.View style={[styles.bottomSheet, animatedStyle]}>
        <View style={styles.handle} />
        {children}
      </Animated.View>
    </GestureDetector>
  );
}

The bottom sheet starts off-screen at translateY = 300. When you start dragging, .onStart() saves the starting position in context. As you drag, .onChange() updates the position, but Math.max() prevents it from going below -300 (fully expanded). When you release, .onEnd() checks the velocity – if you swiped down quickly (velocity > 500), it dismisses. Otherwise, it snaps to either the collapsed (-50) or expanded (-300) position based on where you released it.

Swipe to Delete

Swipe-to-delete lets users remove items from a list by swiping left. It's a common pattern in email apps and to-do lists. This uses worklets for gesture tracking and timing functions for the deletion animation.

function SwipeToDelete({ children, onDelete }) {
  const translateX = useSharedValue(0);
  const itemHeight = useSharedValue(60);

  const pan = Gesture.Pan()
    .activeOffsetX([-10, 10])
    .onChange((event) => {
      if (event.translationX < 0) {
        translateX.value = event.translationX;
      }
    })
    .onEnd(() => {
      if (translateX.value < -100) {
        translateX.value = withTiming(-500, { duration: 200 });
        itemHeight.value = withTiming(0, { duration: 200 }, () => {
          runOnJS(onDelete)();
        });
      } else {
        translateX.value = withSpring(0);
      }
    });

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: translateX.value }],
    height: itemHeight.value,
  }));

  return (
    <GestureDetector gesture={pan}>
      <Animated.View style={[styles.item, animatedStyle]}>
        {children}
      </Animated.View>
    </GestureDetector>
  );
}

The .activeOffsetX([-10, 10]) setting means the gesture only activates after you've moved 10 pixels horizontally, preventing accidental triggers during vertical scrolling. The if (event.translationX < 0) check ensures you can only swipe left, not right. If you swipe past -100 pixels and release, it triggers the deletion: the item slides off-screen (-500), the height collapses to 0, and runOnJS calls your delete function from the UI thread back to JavaScript.

These patterns demonstrate the power of combining Reanimated's animation approaches with gesture handling. Now, let's look at how to keep these animations performing smoothly.

Performance Optimizations

Even though Reanimated runs on the UI thread, poorly structured animations can still drop frames. Here are four key optimizations that will keep your animations consistently smooth at 60 FPS.

Memoize Animations

Every time your component re-renders, any animations you create inside the render function are recreated. This wastes memory and processing time.

Don't do this – creating a new animation object on every render:

{items.map(item => (
  <Animated.View entering={FadeIn.duration(300)} key={item.id} />
))}

Instead, create the animation once outside the component or memoize it:

const fadeIn = FadeIn.duration(300);
{items.map(item => (
  <Animated.View entering={fadeIn} key={item.id} />
))}

By storing the animation in a constant, you create it once and reuse the same object for all items. This reduces memory allocation and garbage collection, keeping your animations smooth even with long lists.

Use useDerivedValue

If you're doing expensive calculations inside useAnimatedStyle, those calculations run every frame, even if the dependencies haven't changed.

Don't do this – recalculating every frame:

const animatedStyle = useAnimatedStyle(() => ({
  width: Math.min(Math.max(offset.value * 2, 100), 500),
}));

Instead, use useDerivedValue to compute the value only when dependencies change:

const width = useDerivedValue(() => 
  Math.min(Math.max(offset.value * 2, 100), 500)
);

const animatedStyle = useAnimatedStyle(() => ({
  width: width.value,
}));

Now the complex calculation only runs when offset.value changes, not on every frame. The useAnimatedStyle just reads the pre-computed width, which is much faster.

Batch Updates

When you update multiple shared values, each update can trigger a separate re-render. This creates unnecessary work for the UI thread.

Don't do this – triggering multiple re-renders:

scale.value = withSpring(1.2);
opacity.value = withSpring(0.8);

Instead, batch the updates using runOnUI:

runOnUI(() => {
  'worklet';
  scale.value = withSpring(1.2);
  opacity.value = withSpring(0.8);
})();

The runOnUI function ensures both updates happen in the same frame, so the UI only re-renders once. This is especially important when updating many values at once, like in complex gestures or choreographed animations.

Prefer Transform Over Layout

Animating layout properties like width, height, or margins forces React Native to recalculate the position of every element that depends on the changing element. This is expensive.

Don't do this – expensive layout recalculation:

width: withSpring(newWidth)

Instead, use transform properties, which only affect the visual appearance without triggering layout:

transform: [{ scaleX: withSpring(scale) }]

Transform operations are hardware-accelerated and don't affect layout, making them dramatically faster. Whenever possible, use translateX/Y instead of changing position, scale instead of changing size, and rotate instead of changing orientation.

These optimizations will keep your animations buttery smooth. Now let's look at how to debug issues when they arise.

Debugging Tips

Even with proper setup, you may encounter issues with animations. Here are the most common problems and their solutions, written as complete troubleshooting steps.

Animations Not Working

If your animations aren't running at all, the most common cause is a missing or incorrectly configured Babel plugin. Open your babel.config.js file and verify that react-native-worklets/plugin is present in the plugins array and is the last plugin in the list. The order matters because the worklets plugin needs to process your code after all other transformations.

After confirming the plugin is correctly configured, clear your Metro bundler cache by running npm start -- --reset-cache, then rebuild your app completely. Simply reloading JavaScript won't work because Babel transformations happen during the build process.

App Crashes on Startup or Reload

If your app crashes immediately after installing Reanimated or when you reload, the native modules likely aren't properly linked. With React Native 0.76+, this usually means the pods weren't installed or the native build is out of sync.

For iOS, run cd ios && pod install && cd .. then do a clean build with npx react-native run-ios. For Android, clean the build with cd android && ./gradlew clean && cd .. then rebuild with npx react-native run-android.

If you're getting build errors about missing headers or modules, make sure you've added both react-native-reanimated and react-native-worklets to your package.json dependencies.

"TurboModuleRegistry Not Found"

If you see an error message saying "TurboModuleRegistry.get('NativeReanimated'): 'NativeReanimated' could not be found", it means the native code hasn't been properly linked to your JavaScript code.

First, verify you're using React Native 0.76 or newer, as Reanimated 4 requires the New Architecture. Check your ios/Podfile for ENV['RCT_NEW_ARCH_ENABLED'] = '1' and android/gradle.properties for newArchEnabled=true.

Then rebuild completely: cd ios && pod install && cd .. && npx react-native run-ios.

Logging and Inspecting Shared Values

If you try to debug worklets using console.log(), you'll notice nothing appears in your console. This is because worklets run on the UI thread, which doesn't have direct access to the JavaScript console.

To log values from worklets, use the useDerivedValue hook:

const offset = useSharedValue(0);

useDerivedValue(() => {
  console.log('Offset:', offset.value);
  return offset.value;
});

For more advanced debugging, React Native's built-in debugger (accessed through dev menu → "Open Debugger") now supports debugging both threads. You can set breakpoints in worklets and inspect shared values in real-time.

Monitor Performance

To see if your animations are actually running at 60 FPS, enable the Performance Monitor built into React Native. Shake your device (or press Cmd+D in the iOS simulator, Cmd+M in Android emulator) to open the dev menu, then select "Show Perf Monitor".

The monitor displays two critical numbers: JS thread FPS and UI thread FPS. Your animations run on the UI thread, so watch that number. If it stays at 60 FPS, your animations are smooth. If it drops below 60, your animations are skipping frames and will appear janky. The JS thread FPS shows whether your React code is keeping up – if this drops, it indicates issues with your component renders, not your animations.

For more detailed debugging information and advanced troubleshooting, check the official debugging guide here.

Conclusion

Reanimated 4 gives you two powerful approaches to animation: CSS animations for simple state changes and worklets for complex, interactive animations that need real-time control.

Start with CSS transitions when building your next animation feature. They're simpler to write, easier to maintain, and perfect for the majority of UI animations. Reach for worklets when you need gesture control, scroll effects, or any animation that requires frame-by-frame updates.

The official documentation provides complete API references, detailed guides, and interactive examples. The GitHub repository includes production-ready sample code you can study and adapt.

Building smooth animations isn't just about technical capability – it's about creating experiences that feel responsive, intuitive, and delightful to use. Reanimated 4 makes achieving that standard straightforward, whether you're animating a simple button press or building a complex screen transition with multiple coordinated elements.

Flutter, Google's open-source UI development toolkit, lets you create seamless and engaging animations effortlessly. Let's delve deeper into why animations are crucial and how Flutter makes animation development an exciting and creative endeavor.

Table of Contents:

1. Prerequisites

2. Quick setup commands

3. Why animations matter

4. High-level types of Flutter animations

5. Implicit animations

   • AnimatedContainer example

6. Explicit animations

   • Explanation

7. Curved animations

8. Chaining animations (translation + rotation)

9. Staggered animations

10. Hero animations

11. AnimatedBuilder with multiple properties

12. Gesture-based animations

13. AnimatedSwitcher

14. TweenSequence

15. Physics-based animations

16. TweenSequence vs Staggered vs Chained

17. AnimatedWidget vs AnimatedBuilder

18. Extra practical tips and best practices

19. Common helpers & widgets (cheat-list)

20. References

Prerequisites

Before diving into Flutter animations, make sure your development environment is ready. You should have:

• Flutter SDK installed and added to PATH. You can confirm this by running flutter doctor, which checks your setup for common issues and ensures everything needed for Flutter development is properly installed.

• Basic knowledge of Dart and Flutter widgets, including StatelessWidget, StatefulWidget, and understanding the build() method.

• An IDE like VS Code or Android Studio, with Flutter plugins installed.

• A device or emulator available to run your projects using flutter run.

• Familiarity with async/await and Dart null-safety (late, non-nullable types).

Quick Setup Commands

For this guide, we’ll use a simple demo project called animation_demo to explore various animations. Here’s how to get started:

flutter doctor
flutter create animation_demo
cd animation_demo
flutter run

• flutter doctor: checks your environment and tells you if anything is missing.

• flutter create animation_demo: scaffolds a new Flutter project called animation_demo.

• flutter run: launches the app on a connected device or emulator.

With this setup, we can start experimenting with animations.

Why Animations Matter

Animations are not just about making an app look fancy. They also play a crucial role in improving user experience. Thoughtful animations help users understand your interface, provide feedback, and make your app feel smoother and more engaging.

For example, visual feedback is essential when a user interacts with your app. A button press might slightly scale down or produce a ripple effect to indicate that the action has been recognized. Smooth transitions also help users understand navigation or changes in the interface. Moving from a list view to a detail view using a hero animation feels intuitive rather than abrupt or jarring.

Finally, well-designed animations can increase engagement and perceived performance. Subtle movements, transitions, or loading indicators can make an app feel faster and more responsive. When animations are thoughtfully implemented, they elevate the overall quality of the application, making it feel polished and professional.

High-Level Types of Flutter Animations

Flutter offers a variety of animation types to handle different scenarios. Understanding these types conceptually is important before jumping into the code:

Implicit Animations

These are simple, property-based animations that require minimal setup. For example, animating a container’s width, height, or color can be done with widgets like AnimatedContainer, AnimatedOpacity, or AnimatedPositioned. Implicit animations are ideal for straightforward changes without needing fine-grained control.

Explicit Animations

Explicit animations give you full control over timing, easing, and the animation lifecycle. You use AnimationController, Tween, and widgets like AnimatedBuilder or AnimatedWidget to create custom, complex animations. Explicit animations are best when you need precise control over multiple properties or custom behavior.

Physics-based Animations

Physics-based animations simulate natural motion using Flutter’s flutter/physics library. Examples include SpringSimulation and FlingSimulation. These are perfect when you want realistic, natural-feeling motion, such as draggable widgets or bouncy UI elements.

Hero Animations

Hero animations enable shared element transitions between screens. Using the Hero widget, you can animate a widget from one route to another, making transitions feel fluid and connected.

Staggered & Sequence Animations

Staggered animations let you time multiple animations to start at different moments. TweenSequence allows multi-stage, chained animations within a single controller. These techniques are useful for orchestrating complex UI movements.

Let’s now go through each of these types of animations so you can see how they work in practice.

Implicit Animations

Implicit animations let you animate widget property changes automatically. Let’s see an example with AnimatedContainer:

AnimatedContainer(
  duration: Duration(milliseconds: 300),
  width: _isExpanded ? 200 : 100,
  height: _isExpanded ? 200 : 100,
  color: _isExpanded ? Colors.blue : Colors.grey,
  curve: Curves.easeInOut,
  child: Center(child: Text('Tap')),
)

Here’s what’s going on in this code:

• AnimatedContainer: automatically animates changes to its properties.

• duration: sets how long the animation takes.

• width / height: animates between 100 and 200 depending on _isExpanded.

• color: animates from grey to blue.

• curve: controls acceleration/deceleration, making movement feel natural.

• child: optional child widget, which is not animated unless its own properties change.

Implicit animations are perfect for quick, property-based effects with minimal code.

Explicit Animations

Explicit animations require more setup but give full control. Here’s a complete, modern, null-safe example that scales a button:

import 'package:flutter/material.dart';

class ScaleDemo extends StatefulWidget {
  @override
  _ScaleDemoState createState() => _ScaleDemoState();
}

class _ScaleDemoState extends State<ScaleDemo> with SingleTickerProviderStateMixin {
  late final AnimationController _controller;
  late final Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0.5, end: 1.5).animate(_controller);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Scale Animation')),
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return Transform.scale(
              scale: _animation.value,
              child: child,
            );
          },
          child: ElevatedButton(
            onPressed: () {
              if (_controller.status == AnimationStatus.completed) {
                _controller.reverse();
              } else {
                _controller.forward();
              }
            },
            child: const Text('Animate'),
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

Let’s look at the key concepts from this code:

• AnimationController: controls the animation timeline from 0.0 to 1.0.

• Tween: maps the controller values to a range (here, 0.5 → 1.5 for scaling). A tween defines the start and end values of an animation.

• AnimatedBuilder: rebuilds only the widgets inside its builder during animation ticks, optimizing performance.

• Child parameter in AnimatedBuilder: avoids rebuilding expensive widgets each frame. In this example, the button is passed as child to prevent unnecessary rebuilds.

You can also use a simpler TextButton with the same animation logic:

TextButton(
  onPressed: () {
    if (_controller.status == AnimationStatus.completed) {
      _controller.reverse();
    } else {
      _controller.forward();
    }
  },
  child: Text('Animate'),
)

Curved Animations

Animations often feel unnatural if they move linearly. CurvedAnimation modifies the progression of the animation to make it more natural:

_controller = AnimationController(
  duration: Duration(seconds: 2),
  vsync: this,
);
_animation = CurvedAnimation(
  parent: _controller,
  curve: Curves.easeInOut,
);

CurvedAnimation wraps a controller and applies a curve to remap 0→1 linearly into eased values.

Often, you combine a CurvedAnimation with a Tween like this:

_animation = Tween<double>(begin: 0, end: 1).animate(
  CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
);

Tween here defines the start and end value of an animation, providing the numeric range that the controller drives.

Chaining Animations (Translation + Rotation)

Sometimes, you want a widget to move and rotate simultaneously. Here’s how to set up such animations:

import 'dart:math' as math;

_translation = Tween<double>(begin: 0, end: 100).animate(_controller);
_rotation = Tween<double>(begin: 0, end: 2 * math.pi).animate(_controller);

This is what’s going on here:

• math.pi is used for rotation calculations.

• _translation moves the widget 100 pixels horizontally.

• _rotation rotates the widget 360 degrees (2π radians).

You can wrap both in a nested Transform inside AnimatedBuilder like this:

Transform.translate(
  offset: Offset(_translation.value, 0),
  child: Transform.rotate(angle: _rotation.value, child: YourWidget()),
);

Staggered Animations

Staggering allows multiple animations to run at different intervals on the same controller:

_controller = AnimationController(duration: Duration(seconds: 2), vsync: this);

_animation1 = Tween<double>(begin: 0, end: 1).animate(
  CurvedAnimation(
    parent: _controller,
    curve: Interval(0.0, 0.5, curve: Curves.easeInOut),
  ),
);

_animation2 = Tween<double>(begin: 0, end: 1).animate(
  CurvedAnimation(
    parent: _controller,
    curve: Interval(0.5, 1.0, curve: Curves.easeInOut),
  ),
);

• Interval defines when each animation starts and ends relative to the controller’s timeline.

• Both animations share the same controller but run in sequence.

Hero Animations

Hero animations create smooth transitions between routes:

First Screen:

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen()));
      },
      child: Hero(
        tag: 'hero-tag',
        child: Image.asset('assets/avatar.png', width: 100, height: 100),
      ),
    );
  }
}

Second Screen:

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Hero(
          tag: 'hero-tag',
          child: Image.asset('assets/avatar.png', width: 300, height: 300),
        ),
      ),
    );
  }
}

• Hero widget animates the shared element between routes.

• Tag must be unique for each shared animation.

• Automatically interpolates size, position, and shape.

AnimatedBuilder with Multiple Properties

You can animate several properties simultaneously:

_controller = AnimationController(duration: Duration(seconds: 2), vsync: this);

_width = Tween<double>(begin: 100, end: 200).animate(_controller);
_height = Tween<double>(begin: 100, end: 200).animate(_controller);

AnimatedBuilder(
  animation: _controller,
  builder: (context, child) {
    return Container(
      width: _width.value,
      height: _height.value,
      child: child,
    );
  },
  child: YourWidget(),
)

• Multiple Tween<double> objects progress together with one controller.

• Using child prevents unnecessary rebuilds of the widget subtree.

Gesture-based Animations

Gesture-based animations respond to direct user interactions like taps, drags, swipes, or long presses. These are especially useful when building interactive UIs such as draggable cards, swipe-to-dismiss lists, or custom sliders.

In the example below, the animation listens for horizontal drag gestures (onPanUpdate and onPanEnd). As the user drags, the widget smoothly follows the finger. When the gesture ends, the animation decides whether to snap forward or reverse depending on how far the user has dragged.

_controller = AnimationController(duration: Duration(milliseconds: 300), vsync: this);
_position = Tween<double>(begin: 0, end: 200).animate(_controller);

GestureDetector(
  onPanUpdate: (details) {
    _controller.value -= (details.primaryDelta ?? 0) / 200;
  },
  onPanEnd: (_) {
    if (_controller.value > 0.5) {
      _controller.forward();
    } else {
      _controller.reverse();
    }
  },
  child: AnimatedBuilder(
    animation: _controller,
    builder: (context, child) {
      return Transform.translate(offset: Offset(_position.value, 0), child: YourWidget());
    },
  ),
)

• onPanUpdate maps gesture movement to controller progress.

• onPanEnd determines the final animation state.

AnimatedSwitcher

AnimatedSwitcher is ideal when you want to swap between two widgets with a smooth transition, such as toggling between login and signup forms, or replacing a loading spinner with actual content. It automatically handles fading, scaling, or custom transitions when the child widget changes.

For example, you can switch between widgets with a crossfade animation:

AnimatedSwitcher(
  duration: Duration(seconds: 1),
  child: _showFirstWidget ? YourFirstWidget() : YourSecondWidget(),
)

Keys ensure AnimatedSwitcher recognizes different widgets:

AnimatedSwitcher(
  duration: Duration(milliseconds: 500),
  child: _showFirstWidget
      ? Container(key: ValueKey('first'), child: YourFirstWidget())
      : Container(key: ValueKey('second'), child: YourSecondWidget()),
)

TweenSequence

Use TweenSequence when you want an animation that passes through multiple stages in a single timeline, like pulsing a button (grow -> shrink -> reset) or animating a progress bar with different speeds at different phase

You can create multi-stage animations like this:

_controller = AnimationController(duration: Duration(seconds: 4), vsync: this);

_animation = TweenSequence<double>([
  TweenSequenceItem(tween: Tween(begin: 0.0, end: 1.0), weight: 1),
  TweenSequenceItem(tween: Tween(begin: 1.0, end: 0.0), weight: 1),
]).animate(_controller);

• Each stage is defined by a TweenSequenceItem.

• Weight determines relative duration.

Physics-based Animations

Physics-based animations are best for interactions that should feel “natural”, like bouncing, springing, flinging, or decelerating motion. For example, you can use them for draggable sheets, swipe-to-dismiss cards, or elastic overscroll effects. Unlike fixed-duration animations, they rely on parameters like mass, stiffness, and damping to simulate real-world physics.

If you want to simulate realistic motion, this is how you can do it:

import 'package:flutter/physics.dart';

final SpringDescription spring = SpringDescription(mass: 1, stiffness: 100, damping: 10);
final SpringSimulation sim = SpringSimulation(spring, 0.0, 1.0, 0.0);
_controller.animateWith(sim);

SpringSimulation drives the animation according to physics parameters.

Tips, Best Practices & Cheat Sheet

• Use vsync with TickerProvider mixins to reduce CPU and battery usage. For example, SingleTickerProviderStateMixin ensures the animation only ticks when the screen is visible, reducing wasted CPU cycles and saving battery.

• Always dispose controllers in dispose(). Failing to dispose AnimationController can cause memory leaks. Always call _controller.dispose() in your State class.

• Prefer const constructors where possible for better rebuild performance. Using const for static widgets like icons or text prevents them from rebuilding unnecessarily.

• Wrap only the portion that needs animation and minimize rebuild areas. Don’t wrap your entire screen in AnimatedBuilder. Instead, isolate just the widget that changes (for example, a single button scaling).

• Profile using Flutter DevTools if frames drop below 60fps: If you notice dropped frames, open the Performance tab in DevTools to identify expensive rebuilds or heavy animations.

• Keep animations subtle, as overuse can harm UX. For example, a button scaling from 1.0 to 1.05 feels natural. Scaling to 1.5 might feel jarring unless it’s intentional.

• Test animations on real devices. Simulators often run animations smoothly. Test on mid-range Android phones to ensure performance is acceptable.

Common helpers and widgets:

• Implicit: AnimatedContainer, AnimatedOpacity, AnimatedPositioned, AnimatedCrossFade, AnimatedSwitcher. This is best for quick, one-line property changes.

• Explicit utilities: AnimationController, Tween, CurvedAnimation, AnimatedBuilder, AnimatedWidget. Use these when you need precision and lifecycle control.

• Physics: SpringSimulation, FlingSimulation, ClampingScrollSimulation. This is great for natural drag and bounce effects.

• Transitions: Hero, PageRouteBuilder. This is best for cross-screen navigation and shared elements.

• Gesture-driven: GestureDetector, Draggable, Dismissible. Use these when you want direct interaction like dragging or swiping.

Conclusion

Animations in Flutter are more than just eye candy. They’re tools for guiding users, providing feedback, and making apps feel alive. From simple implicit animations to advanced physics-based interactions, Flutter gives you the flexibility to craft experiences that feel natural and engaging.

As you experiment, start small with implicit animations, then move into explicit and gesture-driven techniques for more control. Always keep performance and user experience in mind: subtle, purposeful animations go a long way toward making your app feel polished.

With these building blocks and best practices, you’re ready to bring your Flutter UIs to life.

References:

• Flutter cookbook: animations

• Animation performance & best practices (DevTools)

• Books: Flutter in Action (Eric Windmill), Practical Flutter (Frank Zammetti)

If you're looking to add some polished animations to your React apps, Framer Motion is the tool for the job.

In this tutorial, I'll walk you through creating a fully animated mobile menu using Framer Motion in React.

What Are We Going to Build?

In this tutorial, I'll guide you step by step through implementing a complete animated and responsive mobile menu component in React using Framer Motion.

You can also checkout this in-depth video tutorial I have created based on this article.

Responsve navbar with a fully animated mobile menu

Prerequisites

While prior familiarity with Framer Motion is not required to get started with this tutorial, it is important to have a foundation in React, as I won't cover basic React concepts in detail here.

Throughout this tutorial, you'll be utilizing the following tools:

• React 18.2.0: React is a JavaScript library used for building user interfaces. It allows developers to create reusable UI components and efficiently update the UI based on data changes.
• Framer Motion: Framer Motion is a popular animation library for React. It provides an easy-to-use interface for creating smooth, interactive animations and transitions in web applications.
• Vite: Vite is a fast development server and build tool for modern web applications.
• Tailwind: You will be using Tailwind to apply styles to your React components in this tutorial.

Getting Started

To get started with this tutorial, I've prepared a boilerplate project for you which contains all the required dependencies, so you don't need to set up your project from scratch.

Simply clone the starter boilerplate from the GitHub repository and then follow along with the tutorial.

• Starter Boilerplate: View on GitHub
• Final Version: View on GitHub

How to Create a Simple Navbar in React

Before you start creating the animated mobile menu, it's important to first address the desktop navbar. You want to ensure that your navbar not only remains responsive but also looks good on desktop devices.

I've already set up a routes directory for you, containing an array with all the necessary routes for your app. You can easily display these routes by importing the array and mapping through it whenever needed.

//📂./src/routes.ts

import { BiHomeAlt2 } from "react-icons/bi";
import { FiSearch } from "react-icons/fi";
import { PiChatCircleBold } from "react-icons/pi";
import { IoPricetagsOutline } from "react-icons/io5";

export const routes = [
  {
    title: "Home",
    href: "#",
    Icon: BiHomeAlt2,
  },
  {
    title: "Explore",
    href: "#",
    Icon: FiSearch,
  },
  {
    title: "Pricing",
    href: "#",
    Icon: IoPricetagsOutline,
  },
  {
    title: "About",
    href: "#",
    Icon: PiChatCircleBold,
  },
];

Each object within the routes array includes an icon imported from the React Icons library, a clear title, and an href that signifies the route's path.

Let's display the routes array on the navbar. Open up ./src/components/nav-desktop and add the following code:

//📂./src/components/nav-desktop.tsx

import { routes } from "../routes";

export const NavDesktop = () => {
  return (
    <ul className="hidden lg:flex lg:items-center gap-5 text-sm">
      {routes.map((route) => {
        const { Icon, href, title } = route;
        return (
          <li>
            <a
              href={href}
              className="flex items-center gap-1 hover:text-neutral-400 transition-all"
            >
              <Icon />
              {title}
            </a>
          </li>
        );
      })}
    </ul>
  );
};

The NavDesktop component renders an unordered list (ul) containing routes. It uses the routes array imported from the ../routes file to dynamically generate list items (li) with links (a) and icons.

Desktop Navigation

You've just built a beautiful desktop navigation bar, awesome! 🎉

Now that you have your desktop navbar in place, it's time to create the animated mobile menu.

How to Create an Animated Hamburger Icon in React

First, let's create a button with a hamburger icon. This button will allow users to toggle your mobile menu's visibility.

Hamburger React is an incredibly lightweight React library that provides a wide array of animated hamburger icons for smooth integration into your React applications.

While you certainly have the option to create your own animated hamburger icons from the ground up, in this tutorial, you'll utilize Hamburger React to implement the animated hamburger icon and move on to building the animated mobile menu.

Open up ./src/components/nav-mobile.tsx and add the following code:

//📂./src/components/nav-mobile.tsx

import { useClickAway } from "react-use";
import { useRef } from "react";
import { useState } from "react";
import { Squash as Hamburger } from "hamburger-react";
import { AnimatePresence, motion } from "framer-motion";
import { routes } from "../routes";

export const NavMobile = () => {
  const [isOpen, setOpen] = useState(false);

  return (
    <div className="lg:hidden ">
      <Hamburger toggled={isOpen} size={20} toggle={setOpen} />
    </div>
  );
};

This React component creates a button that opens and closes a menu. The button starts as closed (isOpen is false). When clicked, it toggles the menu's visibility.

Additionally, the NavMobile component will remain hidden on larger screens, as you've already implemented the desktop navbar component.

Clickable hamburger icon. Toggling between open and closed states with smooth animations.

How to Create an Animated Mobile Menu in React

Let's enhance the functionality of your mobile menu and display the navigation routes once the user clicks on the hamburger button.

Open up ./src/components/nav-mobile.tsx and add the following code:

//📂./src/components/nav-mobile.tsx

import { useClickAway } from "react-use";
import { useRef } from "react";
import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { Squash as Hamburger } from "hamburger-react";
import { routes } from "../routes";

export const NavMobile = () => {
  const [isOpen, setOpen] = useState(false);
  const ref = useRef(null);

  useClickAway(ref, () => setOpen(false));

  return (
    <div ref={ref} className="lg:hidden ">
      <Hamburger toggled={isOpen} size={20} toggle={setOpen} />
      {isOpen && (
        <div className="fixed left-0 shadow-4xl right-0 top-[3.5rem] p-5 pt-0 bg-neutral-950 border-b border-b-white/20">
          <ul className="grid gap-2">
            {routes.map((route) => {
              const { Icon } = route;

              return (
                <li
                  key={route.title}
                  className="w-full p-[0.08rem] rounded-xl bg-gradient-to-tr from-neutral-800 via-neutral-950 to-neutral-700"
                >
                  <a
                    onClick={() => setOpen((prev) => !prev)}
                    className={
                      "flex items-center justify-between w-full p-5 rounded-xl bg-neutral-950"
                    }
                    href={route.href}
                  >
                    <span className="flex gap-1 text-lg">{route.title}</span>
                    <Icon className="text-xl" />
                  </a>
                </li>
              );
            })}
          </ul>
        </div>
      )}
    </div>
  );
};

Here's a simplified explanation of the component so far:

Setting up State and Refs:

• The component starts by creating two variables: isOpen and ref.
• isOpen keeps track of whether the menu is open or closed.
• ref is like a label that we attach to an element in the HTML. In this case, it's used to reference the menu container.

Handling Clicks Outside the Menu:

• The component uses useClickAway hook from React-Use library to detect when a user clicks outside the menu. When this happens, it triggers a function that closes the menu by setting isOpen to false.

Rendering the Hamburger Button:

• The component renders a button that looks like a hamburger icon. This button serves as a toggle switch for opening and closing the menu.
• When the button is clicked, it toggles the value of isOpen, which controls whether the menu is displayed or not.

Displaying the Menu:

• If isOpen is true, it means the menu should be displayed. In this case, a list of links and icons is shown.
• Each link represents a different page or section. When a link is clicked, it updates isOpen to close the menu.

That's the basic flow of this React component! It sets up state to keep track of the menu's open/closed status, handles clicks outside the menu, renders a button to toggle the menu, and displays the menu content when it's supposed to be open.

Hamburger Menu Toggle Functionality

Now, let's use Framer Motion to animate the mobile menu. Open up ./src/components/nav-mobile.tsx and add the following code:

//📂./src/components/nav-mobile.tsx

import { useClickAway } from "react-use";
import { useRef } from "react";
import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { Squash as Hamburger } from "hamburger-react";
import { routes } from "../routes";

export const NavMobile = () => {
  const [isOpen, setOpen] = useState(false);
  const ref = useRef(null);

  useClickAway(ref, () => setOpen(false));

  return (
    <div ref={ref} className="lg:hidden ">
      <Hamburger toggled={isOpen} size={20} toggle={setOpen} />
      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.2 }}
            className="fixed left-0 shadow-4xl right-0 top-[3.5rem] p-5 pt-0 bg-neutral-950 border-b border-b-white/20"
          >
            <ul className="grid gap-2">
              {routes.map((route, idx) => {
                const { Icon } = route;

                return (
                  <motion.li
                    initial={{ scale: 0, opacity: 0 }}
                    animate={{ scale: 1, opacity: 1 }}
                    transition={{
                      type: "spring",
                      stiffness: 260,
                      damping: 20,
                      delay: 0.1 + idx / 10,
                    }}
                    key={route.title}
                    className="w-full p-[0.08rem] rounded-xl bg-gradient-to-tr from-neutral-800 via-neutral-950 to-neutral-700"
                  >
                    <a
                      onClick={() => setOpen((prev) => !prev)}
                      className={
                        "flex items-center justify-between w-full p-5 rounded-xl bg-neutral-950"
                      }
                      href={route.href}
                    >
                      <span className="flex gap-1 text-lg">{route.title}</span>
                      <Icon className="text-xl" />
                    </a>
                  </motion.li>
                );
              })}
            </ul>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
};

Let's break down the motion-related parts:

AnimatePresence:

The AnimatePresence component is a special container provided by the framer-motion library. It manages the lifecycle of animations for elements entering and leaving the DOM.

In this code, it wraps around the menu content, indicating that it should be animated when it appears or disappears.

Menu Content Animation:

The menu content (the part that appears when the menu is open) is given animation instructions. These instructions include:

• initial: This defines the starting state of the animation. Here, it's set to start with no opacity (completely invisible).
• animate: This defines how the animation progresses. It specifies that the opacity should go to 1 (fully visible), creating a fade-in effect.
• exit: This defines how the animation behaves when the menu content is removed from the DOM. Here, it sets the opacity to 0, creating a fade-out effect.
• transition: This controls how the animation behaves over time. In this case, it's set to have a duration of 0.2 seconds, meaning it takes 0.2 seconds for the animation to complete.

Link Item Animation:

Each individual link item in the menu is given animation instructions. These instructions include:

• initial: This sets the starting state of the animation. It begins with the item small (scale 0) and completely invisible (opacity 0).
• animate: This defines how the animation progresses. It specifies that the item should grow to its regular size (scale 1) and become fully visible (opacity 1).
• transition: This determines the animation behavior. It's set to a "spring" animation, which gives a bouncy effect. The stiffness and damping values control the bounciness, while delay creates a staggered effect, causing each item to start its animation slightly later than the previous one.

These animations add visual flair to the menu and menu items, making them transition smoothly when opening and closing.

Animated Menu Items

Congratulations, now you have a fully animated Hamburger Menu, great job! 🎉

Conclusion

In this tutorial, we integrated Framer Motion to craft a dynamic animated hamburger menu in React. By applying the techniques covered, you now possess the skills to enhance user navigation with smooth animations and interactive elements.

You can follow me on Twitter where I share more useful tips on web development. Happy coding!

Adding smooth and professional animations to your user interfaces can be a bit tricky. In this tutorial, I'll show you how to use Framer Motion in your React apps to create beautiful animations.

This guide is perfect if you're new to Framer Motion or just want to make your animations stand out. We'll walk through the steps together, making it easy to add those beautiful, professional touches to your projects. Let's get started!

What Are We Going to Build?

During this tutorial, I'll guide you step by step through implementing a complete animated sidebar component in React and Framer Motion.

You can also checkout this in-depth video tutorial I have created based on this article.

Animated Sidebar component

Getting Started

To get started with this tutorial, I've prepared a boilerplate project for you which contains all the required dependencies, so you don't need to set up your project from scratch.

Simply clone the starter boilerplate from the GitHub repository and then follow along with the tutorial.

• Starter Boilerplate: View on GitHub
• Final Version: View on GitHub

What is Framer Motion?

Framer Motion is a simple yet powerful animation library for React. With Framer Motion, you can effortlessly add smooth and professional animations and interactions to your React projects.

Framer Motion allows you to create things like smoothly sliding buttons, fading in text, or even complex animations with just a few simple lines of code.

You might also find it interesting to know that Framer Motion is what powers Framer, a popular tool for professional web designers. So, it's trusted by the experts to create those cool animations you often see on really polished websites.

How to Create a Simple Navigation Bar in React

In this section, you'll be creating a straightforward navigation bar. Simply open the components/Navigation file and insert the following code:

//📁components/Navigation

import { Sidebar } from './Sidebar'
import { FiGithub } from 'react-icons/fi'

export const Navigation = () => {
  return (
    <nav className="flex items-center justify-between px-5 py-2 border-b-2 border-zinc-800">
      <div className="flex items-center gap-3">
        <Sidebar />
        <p>Animated Sidebar</p>
      </div>
      <a
        className="flex items-center gap-2 px-4 py-2 text-orange-400 bg-orange-700/20 rounded-xl"
        href=""
      >
        <FiGithub className="text-lg" />
        Source Code
      </a>
    </nav>
  )
}

This component renders a navigation bar on a web page. Within this navigation bar, there are two main sections. The first section includes the Sidebar component. The second section contains a link element styled like a button with an icon.

This code is essentially setting up a basic navigation interface with some predefined styles for a React application.

How to Create a Simple Sidebar Component in React

In this section, you'll be building a simple sidebar component in React. First of all, let's open up components/Sidebar and add the following code:

//📁components/Sidebar

export const Sidebar = () => {
  const [open, setOpen] = useState(false)
  const ref = useRef(null)
  useClickAway(ref, () => setOpen(false))
  const toggleSidebar = () => setOpen(prev => !prev)

  return (
    <>
      <button
        onClick={toggleSidebar}
        className="p-3 border-2 border-zinc-800 rounded-xl"
        aria-label="toggle sidebar"
      >
        <GiHamburgerMenu />
      </button>
      {open && (
        <>
          <div
            aria-hidden="true"
            className="fixed bottom-0 left-0 right-0 top-0 z-40 bg-[rgba(0,0,0,0.1)] backdrop-blur-sm"
          ></div>
          <div
            className="fixed top-0 bottom-0 left-0 z-50 w-full h-screen max-w-xs border-r-2 border-zinc-800 bg-zinc-900"
            ref={ref}
            aria-label="Sidebar"
          >
            <div className="flex items-center justify-between p-5 border-b-2 border-zinc-800">
              <span>Welcome</span>
              <button
                onClick={toggleSidebar}
                className="p-3 border-2 border-zinc-800 rounded-xl"
                aria-label="close sidebar"
              >
                <AiOutlineRollback />
              </button>
            </div>
            <ul>
              {items.map((item, idx) => {
                const { title, href, Icon } = item
                return (
                  <li key={title}>
                    <a
                      onClick={toggleSidebar}
                      href={href}
                      className="flex items-center justify-between gap-5 p-5 transition-all border-b-2 hover:bg-zinc-900 border-zinc-800"
                    >
                      <span>{title}</span>
                      <div>
                        <Icon className="text-2xl" />
                      </div>
                    </a>
                  </li>
                )
              })}
            </ul>
          </div>
        </>
      )}
    </>
  )
}

const items = [
  { title: 'Home', Icon: BiHomeSmile, href: '#' },
  { title: 'About', Icon: BiUser },
  { title: 'Contact', Icon: HiOutlineChatBubbleBottomCenterText, href: '#' },
  { title: 'Settings', Icon: FiSettings, href: '#' },
  { title: 'Shop', Icon: FiShoppingCart, href: '#' },
]

This component creates a collapsible sidebar navigation menu.

When the sidebar button is clicked, the sidebar either opens or closes. Inside the sidebar, there are menu items like Home , About, Contact, and so on represented by icons.

Clicking on any of these items will perform an action, like navigating to a different page.

The component also handles various interactions, such as clicking outside the sidebar to close it.

Overall, this component sets up a functional and interactive sidebar menu for a web application. Here is how your sidebar looks like so far:

Sidebar Component

While this sidebar functions perfectly, you may notice that there are no animations present. Let's now integrate Framer Motion and incorporate some smooth animations into this sidebar.

How to Animate React Components with Framer Motion

Now that you have a functional sidebar, let's enhance it with some animations to add a bit of flair. Open up components/Sidebar and add the following code:

import { useRef, useState } from 'react'
import { GiHamburgerMenu } from 'react-icons/gi'
import { AnimatePresence, motion } from 'framer-motion'
import { useClickAway } from 'react-use'
import { AiOutlineRollback } from 'react-icons/ai'
import { BiHomeSmile, BiUser } from 'react-icons/bi'
import { HiOutlineChatBubbleBottomCenterText } from 'react-icons/hi2'
import { FiSettings, FiShoppingCart } from 'react-icons/fi'

export const Sidebar = () => {
  const [open, setOpen] = useState(false)
  const ref = useRef(null)
  useClickAway(ref, () => setOpen(false))
  const toggleSidebar = () => setOpen(prev => !prev)

  return (
    <>
      <button
        onClick={toggleSidebar}
        className="p-3 border-2 border-zinc-800 rounded-xl"
        aria-label="toggle sidebar"
      >
        <GiHamburgerMenu />
      </button>
      <AnimatePresence mode="wait" initial={false}>
        {open && (
          <>
            <motion.div
              {...framerSidebarBackground}
              aria-hidden="true"
              className="fixed bottom-0 left-0 right-0 top-0 z-40 bg-[rgba(0,0,0,0.1)] backdrop-blur-sm"
            ></motion.div>
            <motion.div
              {...framerSidebarPanel}
              className="fixed top-0 bottom-0 left-0 z-50 w-full h-screen max-w-xs border-r-2 border-zinc-800 bg-zinc-900"
              ref={ref}
              aria-label="Sidebar"
            >
              <div className="flex items-center justify-between p-5 border-b-2 border-zinc-800">
                <span>Welcome</span>
                <button
                  onClick={toggleSidebar}
                  className="p-3 border-2 border-zinc-800 rounded-xl"
                  aria-label="close sidebar"
                >
                  <AiOutlineRollback />
                </button>
              </div>
              <ul>
                {items.map((item, idx) => {
                  const { title, href, Icon } = item
                  return (
                    <li key={title}>
                      <a
                        onClick={toggleSidebar}
                        href={href}
                        className="flex items-center justify-between gap-5 p-5 transition-all border-b-2 hover:bg-zinc-900 border-zinc-800"
                      >
                        <motion.span {...framerText(idx)}>{title}</motion.span>
                        <motion.div {...framerIcon}>
                          <Icon className="text-2xl" />
                        </motion.div>
                      </a>
                    </li>
                  )
                })}
              </ul>
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </>
  )
}

const items = [
  { title: 'Home', Icon: BiHomeSmile, href: '#' },
  { title: 'About', Icon: BiUser },
  { title: 'Contact', Icon: HiOutlineChatBubbleBottomCenterText, href: '#' },
  { title: 'Settings', Icon: FiSettings, href: '#' },
  { title: 'Shop', Icon: FiShoppingCart, href: '#' },
]

const framerSidebarBackground = {
  initial: { opacity: 0 },
  animate: { opacity: 1 },
  exit: { opacity: 0, transition: { delay: 0.2 } },
  transition: { duration: 0.3 },
}

const framerSidebarPanel = {
  initial: { x: '-100%' },
  animate: { x: 0 },
  exit: { x: '-100%' },
  transition: { duration: 0.3 },
}

const framerText = delay => {
  return {
    initial: { opacity: 0, x: -50 },
    animate: { opacity: 1, x: 0 },
    transition: {
      delay: 0.5 + delay / 10,
    },
  }
}

const framerIcon = {
  initial: { scale: 0 },
  animate: { scale: 1 },
  transition: {
    type: 'spring',
    stiffness: 260,
    damping: 20,
    delay: 1.5,
  },
}

Now let's go through the changes you've just added to your sidebar component:

• motion from Framer Motion: motion is an element provided by the Framer Motion library. It's used to wrap other components or elements to enable animation effects. In this code, we've used it to animate different elements of the sidebar, such as background overlays and icons.
• AnimatePresence from Framer Motion: AnimatePresence is a component from Framer Motion that helps us animate components when they are mounted or unmounted. It's used to wrap elements that may appear or disappear dynamically. In this code, we've used it to handle the animation when the sidebar opens or closes.
• Animation Objects: framerSidebarBackground – This object contains properties that define how the background overlay of the sidebar animates. It has three states: initial (when it's not visible), animate (when it's fully visible), and exit (when it's disappearing). opacity is used to control the transparency of the overlay. transition defines how the animation transitions between states, including the duration of the animation and a delay.
• framerSidebarPanel: This object defines the animation for the sidebar panel itself, controlling how it slides into view.
• x is used to set the horizontal position of the sidebar. Similar to framerSidebarBackground, it defines initial, animate, and exit states, as well as transition properties.
• framerText and framerIcon: These objects define animations for the text and icons within the sidebar items. They control properties like opacity, position (x), and scale to create smooth transitions and effects.

These animation objects provide a structured way to define how different elements within the sidebar should animate when they appear or disappear. They use a combination of properties like opacity, position, and scale to animate your React components.

Final result

Congratulations! You've successfully brought life to your sidebar using React and Framer Motion. 🎉

Conclusion

In this tutorial you learned how to create a fully animated sidebar using Framer Motion.

With this new skill, you're now equipped to add smooth, professional animations to your React applications.

The possibilities for creating impressive and intricate animations using Framer Motion are endless.

Don't hesitate to showcase your projects on Twitter with me – I'd love to see your creative ideas come to life!

Here are the main distinctions between them:

This handbook uses examples to explain the two animating techniques so that you can understand their similarities and differences.

Table of Contents

1. What Are CSS Transitions?
2. Categories of CSS Transition Properties
   • What Are the Required CSS Transition Properties?
   • What is the CSS transition-property?
   • What is the CSS transition-duration Property?
   • Examples of the Required CSS Transition Properties
   • What Are the Optional CSS Transition Properties?
   • What is the CSS transition-timing-function Property?
   • What is the CSS transition-delay Property?
   • Examples of the Optional CSS Transition Properties
3. Shorthand for Defining the CSS Transition Properties
4. What is CSS Animation?
   • Components of CSS Animations
   • What are CSS @keyframes?
5. What Are CSS Animation Properties?
   • What is the CSS animation-name Property?
   • What is the CSS animation-duration Property?
   • What is the CSS animation-timing-function Property?
   • What is the CSS animation-delay Property?
   • What is the CSS animation-iteration-count Property?
   • What is the CSS animation-direction Property?
   • What is the CSS animation-play-state Property?
   • What is the CSS animation-fill-mode Property?
6. What is the CSS animation Property?
7. Important Stuff to Know about CSS Transitions and Animations
8. Wrapping up

Without further ado, let's discuss CSS transitions.

What Are CSS Transitions?

CSS transitions provide a smooth and gradual way to change a specific CSS property's value.

So, instead of allowing browsers to change a property's value immediately, CSS transitions cause the change to happen smoothly over a specified period of time.

For instance, suppose you wish to change an element's size on hover. In that case, you have two options:

1. Implement the change without CSS transitions.
2. Use CSS transitions to transition smoothly from the element's initial size to its new state.

Let's see some examples of the two options.

How to change an image's size on mouse hover without using CSS transitions

img {
  width: 40%;
}

img:hover {
  width: 100%;
}

Try Editing It

The code above instantaneously changes the image's size from its initial width (40%) to its new dimension (100%) because we did not use CSS transitions.

With CSS transitions, you will get a much more pleasing experience. Let's see an example below.

How to change an image's size on mouse hover with CSS transitions

img {
  width: 40%;
  transition: width 3s ease-out 0.4s;
}

img:hover {
  width: 100%;
}

Try Editing It

The transition property applied a smooth and gradual transition from width: 40% to width: 100% on the image.

Categories of CSS Transition Properties

We have two categories of CSS transition properties:

• Required transition properties
• Optional transition properties

Let's discuss the two.

What Are the Required CSS Transition Properties?

The two required properties you need to create CSS transitions are:

• transition-property
• transition-duration

What is the CSS transition-property?

The CSS transition-property specifies the CSS property you wish to transition from its initial to its new state.

What is the CSS transition-duration Property?

The CSS transition-duration property defines the length of time in which browsers should complete the selected element's transition. In other words, transition-duration sets the total start-to-finish time.

Note the following:

• The transition-duration property only accepts time in milliseconds (ms) or seconds (s).
• Zero seconds (0s) is the transition-duration's default value. Therefore, no transition event will occur if you do not define a transition-duration property.
• transition-duration accepts only a zero (0) or a positive numeric value. Browsers will ignore the duration declaration if you provide anything else.

Examples of the Required CSS Transition Properties

Below are some examples of the two required CSS transition properties.

How to transition an element's width within three seconds

img {
  width: 40%;
  transition-property: width;
  transition-duration: 3s;
}

img:hover {
  width: 100%;
}

Try Editing It

Here's what we did in the snippet above:

1. The transition-property tells browsers to transition the img's width from its initial value (40%) to its new state (100%).
2. We used the transition-duration property to define three seconds (3s) duration from the start to the end of the transition.

Therefore, instead of an instantaneous change from the image's initial width (40%) to its new size (100%), browsers will transition smoothly between the old and new state in three seconds (3s).

How to transition a font's size within five seconds

p {
  font-size: 1rem;
  transition-property: font-size;
  transition-duration: 5s;
}

p:hover {
  font-size: 7rem;
}

Try Editing It

Here's what we did in the snippet above:

1. The transition-property informs browsers to transition the p element's font-size.
2. We used the transition-duration property to define a five-second (5s) duration from the start to the end of the transition.

Therefore, instead of an immediate change from the paragraph's initial font size (1rem) to its new size (7rem), browsers will transition smoothly between the old and new state in five seconds (5s).

Let's now discuss the optional CSS transition properties.

What Are the Optional CSS Transition Properties?

The two optional CSS transition properties are:

• transition-timing-function
• transition-delay

What is the CSS transition-timing-function Property?

The CSS transition-timing-function property defines the implementation timing (speed) of the selected element's transition.

In other words, the transition-timing-function specifies the speed for implementing the transition at various intervals of its duration.

The values the transition-timing-function property accepts are:

• ease: Starts the transition slowly. Then, speeds it up and ends it slowly. ease is the transition-timing-function property's default value. It is equivalent to cubic-bezier(0.25,0.1,0.25,1).
• ease-in: Starts the transition slowly with a gradual increase in speed. It is equal to cubic-bezier(0.42,0,1,1).
• ease-out: Starts fast and ends the transition slowly. It is equivalent to cubic-bezier(0,0,0.58,1).
• ease-in-out: Starts and ends the transition slowly. It is equal to cubic-bezier(0.42,0,0.58,1).
• linear: Starts and ends the transition using a consistent speed throughout the transition's duration. It is equivalent to cubic-bezier(0,0,1,1).
• cubic-bezier(p1, p2, p3, p4): Allows you to define the values of the cubic-bezier curve.

What is the CSS transition-delay Property?

The CSS transition-delay property defines how long the browser should wait before it starts the transition.

Note the following:

• The transition-delay property must be in milliseconds (ms) or seconds (s).
• 0s is the transition-delay's default value. It causes the transition to start immediately from the moment browsers apply it to an HTML element.
• A negative value causes the transition to begin immediately from the specified time. For instance, suppose an element's transition-delay value is -3s. In that case, the transition will start immediately at 3 seconds.
• A positive value causes the transition to begin after the specified delay time has elapsed. For instance, suppose an element's transition-delay value is 3s. In that case, the transition will start after a 3-second delay.

Examples of the Optional CSS Transition Properties

Below are some examples of the two optional CSS transition properties.

How to transition an element's width with an ease-out speed

img {
  width: 40%;
  transition-property: width;
  transition-duration: 3s;
  transition-timing-function: ease-out;
}

img:hover {
  width: 100%;
}

Try Editing It

Here's what we did in the snippet above:

1. The transition-property informs browsers to transition the img element's width.
2. We used the transition-duration property to define three seconds (3s) duration from the start to the end of the transition.
3. We used the transition-timing-function property to begin the transition quickly and end it slowly.

How to transition an element's width with a linear speed

img {
  width: 40%;
  transition-property: width;
  transition-duration: 3s;
  transition-timing-function: linear;
}

img:hover {
  width: 100%;
}

Try Editing It

Here's what we did in the snippet above:

1. The transition-property informs browsers to transition the img element's width.
2. We used the transition-duration property to define three seconds (3s) duration from the start to the end of the transition.
3. The transition-timing-function property tells browsers to transition from the element's initial width to its new size using a consistent transition speed throughout.

How to transition an element's width with a two-second delay

img {
  width: 40%;
  transition-property: width;
  transition-duration: 3s;
  transition-timing-function: linear;
  transition-delay: 2s;
}

img:hover {
  width: 100%;
}

Try Editing It

Here's what we did in the snippet above:

1. The transition-property informs browsers to transition the img element's width property.
2. We used the transition-duration property to define three seconds (3s) duration from the start to the end of the transition.
3. The transition-timing-function property transitions the img element's width using a consistent transition speed.
4. We used the transition-delay property to apply a two-second (2s) delay to the starting time of the transition.

Now that we know the CSS transition properties, we can discuss defining them with a shorthand syntax.

Shorthand for Defining the CSS Transition Properties

We use the transition property as shorthand for the transition-property, transition-duration, transition-timing-function, and transition-delay properties.

In other words, instead of writing:

img {
  transition-property: width;
  transition-duration: 3s;
  transition-timing-function: linear;
  transition-delay: 2s;
}

You can alternatively use the transition property to shorten your code like so:

img {
  transition: width 3s linear 2s;
}

Try Editing It

Here is the transition property's syntax:

transition: <property-name> <duration> <timing-function> <delay>;

Note that you can use the transition property to transition the state of multiple CSS properties.

Here's an example:

img {
  width: 40%;
  opacity: 0.4;
  transition: width 3s linear, opacity 4s ease-out, transform 5s;
}

img:hover {
  width: 100%;
  opacity: 1;
  transform: rotate(45deg);
}

Try Editing It

The snippet above used commas (,) to separate each of the transitional properties we are applying to the img element.

So, now that we know what CSS transitions are and how they work, we can discuss CSS animations.

What is CSS Animation?

CSS animations provide a smooth and gradual way to animate an element's style changes from one keyframe to another.

Components of CSS Animations

CSS animations consist of two components:

1. Keyframes
2. Animation properties

What are CSS @keyframes?

@keyframes define the styles you want browsers to apply smoothly to an element at some specified key moments (frames).

Syntax of CSS @keyframes

A CSS @keyframes at-rule consists of the following:

1. An @keyframes keyword
2. The @keyframes' name
3. A block of zero or more keyframes
4. The animation's key moment selector
5. The key moment's style declarations

Here's an illustration:

A CSS @keyframes at-rule consists of a keyword, a name, and a block of keyframes

Examples of CSS @keyframes

Below are examples of the CSS @keyframes.

How to define change-color's keyframes

@keyframes change-color {
  /* The first keyframe */
  0% {background-color: purple;}
  /* The last keyframe */
  100% {background-color: yellow;}
}

Here's what we did in the snippet above:

1. We created the @keyframes at-rule named change-color.
2. We defined a keyframe for browsers to apply when an associated element's animation is at its zero percent (0%) duration.
3. We defined a keyframe for browsers to apply when an associated element's animation is at its one hundred percent (100%) duration.

Note:

• You can name your @keyframes anything you wish.
• 0% is equivalent to the keyword from. And 100% is the same as the keyword to. In other words, the snippet above is equal to the following:

@keyframes change-color {
  /* The first keyframe */
  from {background-color: purple;} 
  /* The last keyframe */
  to {background-color: yellow;} 
}

• An animation's start and end states (from and to) are optional.
• Suppose you omit an @keyframes' start (0%) or end (100%) state. In that case, browsers will default to the element's existing styles for either state.
• The important rule (!important) does not work in keyframes. Browsers will ignore any keyframe declaration with an !important rule.

Let's see another example.

How to define shape-image's keyframes

@keyframes shape-image {
  0% { width: 40%; border: 5px solid blue;}
  40% { width: 70%; border: 1px solid red; border-radius: 50%;}
  75% { width: 50%; border: 30px solid green;}
  100% { width: 100%; border: 7px solid purple;}
}

Here's what we did in the snippet above:

1. We created the @keyframes ruleset named shape-image.
2. We defined four keyframes for browsers to apply when an associated element's animation is at the specified key moments.

Tip: Use the CSSKeyframesRule interface in JavaScript to access the CSS @keyframes at-rules.

So, now that we know the CSS @keyframes ruleset, we can discuss the other component of CSS animations—animation properties.

What Are CSS Animation Properties?

CSS animation properties inform browsers about the animation you wish to apply to a specific element.

In other words, CSS animation properties describe the animation's attributes, such as its name, duration, direction, and iteration.

The nine (9) types of CSS animation properties are:

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-play-state
• animation-fill-mode
• animation

Let's discuss each one now.

What is the CSS animation-name property?

The CSS animation-name property defines the name of the @keyframes at-rules containing the styles you wish to apply to a specific element.

Here's an example:

div {
  width: 150px;
  height: 150px;
  animation-name: change-color;
}

@keyframes change-color {
  from {background-color: purple;}
  to {background-color: yellow;}
}

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. We created change-color's @keyframes ruleset.
3. We defined two keyframes for browsers to use when the div element's animation is at its zero percent (0%) and one hundred percent (100%) duration.

Tip: You can use the keyword none to deactivate an animation.

What is the CSS animation-duration property?

The CSS animation-duration property defines the time to complete one animation cycle.

Note the following:

• The animation-duration property must be in milliseconds (ms) or seconds (s) units.
• animation-duration's value must be zero or positive. Otherwise, browsers will ignore the duration declaration.
• Zero seconds (0s) is animation-duration's default value.
• Suppose 0s is animation-duration's value. In that case, browsers will still execute the animation by firing the animationStart and animationEnd events. But the animation-fill-mode's value will determine whether the animation is visible. For instance, if you set the animation-fill-mode to none, the animation will be invisible.

Let's see some examples of the animation-duration property.

How to animate an element's color change within three seconds

div {
  width: 150px;
  height: 150px;
  animation-name: change-color;
  animation-duration: 3s;
}

@keyframes change-color {
  from {background-color: purple;}
  to {background-color: yellow;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. The animation-duration property sets the animation's runtime for one cycle to three seconds (3s).
3. We created change-color's @keyframes ruleset.
4. We defined two keyframes for browsers to apply when the div element's animation is at zero percent (0%) and one hundred percent (100%) duration.

Therefore, browsers will create a smooth three-second animation from change-color's first keyframe to its last.

How to animate an image's border and width changes within seven seconds

img {
  animation-name: shape-image;
  animation-duration: 7s;
}

@keyframes shape-image {
  0% { width: 40%; border: 5px solid blue;}
  40% { width: 70%; border: 1px solid red; border-radius: 50%;}
  75% { width: 50%; border: 30px solid green;}
  100% { width: 100%; border: 7px solid purple;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the img element.
2. The animation-duration property sets the animation's runtime for one cycle to seven seconds (7s).
3. We created shape-image's @keyframes ruleset.
4. We defined four keyframes for browsers to apply when the image's animation is at the specified key moments.

Therefore, browsers will create a smooth seven-second animation from shape-image's first keyframe to its last.

What is the CSS animation-timing-function property?

The CSS animation-timing-function property defines an animation's implementation timing (speed) throughout its duration.

In other words, the animation-timing-function property specifies the speed for implementing the animation at various intervals of its duration.

The values the animation-timing-function property accepts are:

• ease: Starts the animation slowly. Then speeds it up and ends it slowly. ease is the animation-timing-function property's default value. It is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).
• ease-in: Starts the animation slowly with a gradual increase in speed. It is equivalent to cubic-bezier(0.42, 0, 1, 1).
• ease-out: Starts fast and ends the animation slowly. It is equivalent to cubic-bezier(0, 0, 0.58, 1).
• ease-in-out: Starts and ends the animation slowly. It is equivalent to cubic-bezier(0.42, 0, 0.58, 1).
• linear: Starts and ends the animation using a consistent speed throughout the animation's duration. It is equivalent to cubic-bezier(0, 0, 1, 1).
• cubic-bezier(p1, p2, p3, p4): Allows you to define the values of the cubic-Bezier curve.

Let's see some examples of the animation-timing-function property.

How to animate an element's width change using a linear speed

div {
  width: 150px;
  height: 150px;
  background-color: purple;
  animation-name: change-width;
  animation-duration: 7s;
  animation-timing-function: linear;
}

@keyframes change-width {
  from {width: 50px;}
  to {width: 100%;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. The animation-duration property sets the animation's runtime for one cycle to seven seconds (7s).
3. The linear timing function applied a consistent speed to the div's animation.
4. We created change-width's @keyframes ruleset.
5. We defined two keyframes for browsers to apply when the div's animation is at zero percent (0%) and one hundred percent (100%) duration.

Therefore, browsers will create a smooth seven-second animation from change-width's first keyframe to its last.

Let's see another example.

How to animate an element's width change using an ease-in-out and a linear speed

div {
  width: 150px;
  height: 150px;
  color: white;
  animation-name: change-width;
  animation-duration: 7s;
}

.first-div {
  background-color: purple;
  animation-timing-function: ease-in-out;
}

.second-div {
  background-color: orange;
  animation-timing-function: linear;
}

@keyframes change-width {
  from {width: 50px;}
  to {width: 100%;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. The animation-duration property sets the animation's runtime for one cycle to seven seconds (7s).
3. We used the ease-in-out timing function to apply a slow start and slow end speed to the first-div's animation.
4. The linear timing function applied a consistent speed to the second-div's animation.
5. We created change-width's @keyframes ruleset.
6. We defined two keyframes for browsers to apply when the div elements' animations are at their zero percent (0%) and one hundred percent (100%) durations.

Therefore, browsers will create a smooth seven-second animation from change-width's first keyframe to its last.

What is the CSS animation-delay property?

The CSS animation-delay property defines how long browsers should wait before starting an animation.

In other words, use animation-delay to specify whether the animation should start immediately from the beginning, immediately from a specific time, or later (after some delay).

Note the following:

• The animation-delay property must be in milliseconds (ms) or seconds (s) units.
• 0s is animation-delay's default value. It causes the animation to start once browsers apply it to an HTML element.
• A negative value causes the animation to start immediately from the specified time. For instance, suppose an element's animation-delay value is -3s. In that case, the animation will begin immediately at 3 seconds.
• A positive value causes the animation to start after the specified delay time has elapsed. For instance, suppose an element's animation-delay value is 3s. In that case, the animation will begin after a 3-second delay.

Let's see some examples of the animation-delay property.

How to animate an element's width change with a four-second delay

div {
  width: 150px;
  height: 150px;
  color: white;
  animation-name: change-width;
  animation-duration: 7s;
}

.first-div {
  background-color: purple;
  animation-timing-function: ease-in-out;
}

.second-div {
  background-color: orange;
  animation-timing-function: linear;
  animation-delay: 4s;
}

@keyframes change-width {
  from {width: 50px;}
  to {width: 100%;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div elements.
2. The animation-duration property sets the animation's runtime for one cycle to seven seconds (7s).
3. We used the ease-in-out timing function to apply a slow start and slow end speed to the first-div's animation.
4. The linear timing function applied a consistent speed to the second-div's animation.
5. The animation-delay property applied a four-second (4s) delay to the starting time of the second-div's animation.
6. We created change-width's @keyframes ruleset.
7. We defined two keyframes for browsers to apply when the div elements' animations are at their zero percent (0%) and one hundred percent (100%) durations.

Therefore, browsers will delay the second-div's animation for four seconds while starting the first-div's animation immediately.

Below is another example of the animation-delay property.

How to animate an element's width change from the fourth-second mark of the animation sequence

div {
  width: 150px;
  height: 150px;
  color: white;
  animation-name: change-width;
  animation-duration: 7s;
}

.first-div {
  background-color: purple;
  animation-timing-function: ease-in-out;
}

.second-div {
  background-color: orange;
  animation-timing-function: linear;
  animation-delay: -4s;
}

@keyframes change-width {
  from {width: 50px;}
  to {width: 100%;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div elements.
2. The animation-duration property sets the animation's runtime for one cycle to seven seconds (7s).
3. We used the ease-in-out timing function to apply a slow start and slow end speed to the first-div's animation.
4. The linear timing function applied a consistent speed to the second-div's animation.
5. The animation-delay property makes the second-div's animation start from the fourth-second mark of the animation sequence.
6. We created change-width's @keyframes ruleset.
7. We defined two keyframes for browsers to apply when the div elements' animations are at their zero percent (0%) and one hundred percent (100%) durations.

Therefore, browsers will start the second-div's animation immediately at the fourth-second mark.

What is the CSS animation-iteration-count property?

The CSS animation-iteration-count property defines the number of times browsers should repeat an animation.

Note the following:

• 1 is animation-iteration-count's default value.
• The animation-iteration-count property accepts non-integer values—for instance, 0.5 tells browsers to play half of a single animation cycle.
• animation-iteration-count does not accept negative values.
• An infinite value means browsers should repeat the animation forever.

Below are some examples.

How to animate an element's width change with a two-cycle iteration

div {
  width: 70px;
  height: 50px;
  background-color: purple;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 2;
}

@keyframes change-width {
  from {width: 70px;}
  to {width: 100%;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. The animation-duration property sets the animation's runtime for one cycle to five seconds (5s).
3. We used the ease-in-out timing function to apply a slow start and slow end speed to the div's animation.
4. The animation-iteration-count property tells browsers to run the animation twice.
5. We created change-width's @keyframes ruleset.
6. We defined two keyframes for browsers to apply when the div element's animation is at zero percent (0%) and one hundred percent (100%) duration.

Therefore, browsers will run the div's animation in two cycles.

Below is another example of the animation-iteration-count property.

How to animate an element's width change with an infinite iteration

div {
  width: 70px;
  height: 50px;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. The animation-duration property sets the animation's runtime for one cycle to five seconds (5s).
3. We used the ease-in-out timing function to apply a slow start and slow end speed to the div's animation.
4. The animation-iteration-count property tells browsers to run the animation infinitely.
5. We created change-width's @keyframes ruleset.
6. We defined two keyframes for browsers to apply when the div element's animation is at its zero percent (0%) and one hundred percent (100%) duration.

Therefore, browsers will run the div's animation infinitely.

What is the CSS animation-direction property?

The CSS animation-direction property specifies whether the animation's first iteration should run forward or backward. It also defines whether browsers should alternate the direction of subsequent iterations.

The values animation-direction accepts are:

• normal: Play the animation in the normal direction (that is, forward). normal is animation-direction's default value.
• reverse: Play the animation in the reverse direction (backward).
• alternate: Play the first animation cycle in the normal direction. Then, alternates the subsequent iterations between the backward and forward directions.
• alternate-reverse: Play the first animation cycle in the reverse direction. Then, alternates the subsequent iterations between the forward and backward directions.

Below are some examples.

How to animate an element's width change while starting each animation cycle backward

div {
  width: 70px;
  height: 50px;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. The animation-duration property sets the animation's runtime for one cycle to five seconds (5s).
3. We used the ease-in-out timing function to apply a slow start and slow end speed to the div's animation.
4. The animation-iteration-count property tells browsers to run the animation infinitely.
5. The animation-direction property starts each animation cycle in reverse (backward).
6. We created change-width's @keyframes ruleset.
7. We defined two keyframes for browsers to apply when the div element's animation is at zero percent (0%) and one hundred percent (100%) duration.

Below is another example of the animation-direction property.

How to animate an element's width change while alternating the animation's direction

div {
  width: 70px;
  height: 50px;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. The animation-duration property sets the animation's runtime for one cycle to five seconds (5s).
3. We used the ease-in-out timing function to apply a slow start and slow end speed to the div's animation.
4. The animation-iteration-count property tells browsers to run the animation infinitely.
5. The animation-direction property alternates the direction of each cycle's animation.
6. We created change-width's @keyframes ruleset.
7. We defined two keyframes for browsers to apply when the div element's animation is at zero percent (0%) and one hundred percent (100%) duration.

What is the CSS animation-play-state property?

The CSS animation-play-state property specifies whether the browser is running or has paused a specific animation.

The values the animation-play-state property accepts are:

• running: Specifies that the browser is running the animation. running is animation-play-state's default value.
• paused: Specifies that the browser has paused the animation.

Here's an example:

div {
  width: 70px;
  height: 50px;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

div:hover {
  animation-play-state: paused;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. The animation-duration property sets the animation's runtime for one cycle to five seconds (5s).
3. We used the ease-in-out timing function to apply a slow start and slow end speed to the div's animation.
4. The animation-iteration-count property tells browsers to run the animation infinitely.
5. The animation-direction property alternates the direction of each cycle's animation.
6. We used the animation-play-state on the div's hover pseudo-class to pause the animation whenever users move their mouse over the div element.
7. We created change-width's @keyframes ruleset.
8. We defined two keyframes for browsers to apply when the div element's animation is at zero percent (0%) and one hundred percent (100%) duration.

What is the CSS animation-fill-mode property?

The CSS animation-fill-mode property defines the styles browsers should apply to an element before (or after) its animation runs.

The values the animation-fill-mode property accepts are:

• none: Browsers will apply no style to the element before or after the animation runs. none is animation-fill-mode's default value.
• forwards: The element will retain the last keyframe's style declarations when the animation ends. (Note: The animation-direction and animation-iteration-count properties determine the last keyframe.)
• backwards: The element will retain the first keyframe's style declarations during the animation-delay period. (Note: The animation-direction property determines the first keyframe.)
• both: Browsers will apply both the forwards and backwards rules. Therefore, the animation properties will extend in both directions.

Below are some examples.

How to style an element after its animation ends

div {
  width: 70px;
  height: 50px;
  background-color: green;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. The animation-duration property sets the animation's runtime for one cycle to five seconds (5s).
3. We used the ease-in-out timing function to apply a slow start and slow end speed to the div's animation.
4. The animation-fill-mode property tells browsers to retain the last keyframe's style declarations when the animation ends.
5. We created change-width's @keyframes ruleset.
6. We defined two keyframes for browsers to apply when the div element's animation is at zero percent (0%) and one hundred percent (100%) duration.

Below is another example of the animation-fill-mode property.

How to style an element during its animation delay period

div {
  width: 70px;
  height: 50px;
  background-color: green;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-delay: 3s;
  animation-fill-mode: backwards;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. The animation-duration property sets the animation's runtime for one cycle to five seconds (5s).
3. We used the ease-in-out timing function to apply a slow start and slow end speed to the div's animation.
4. The animation-fill-mode property tells browsers to retain the first keyframe's style declarations during the animation-delay period.
5. We created change-width's @keyframes ruleset.
6. We defined two keyframes for browsers to apply when the div element's animation is at zero percent (0%) and one hundred percent (100%) duration.

Let's see a third example of the animation-fill-mode property.

How to style an element during its animation delay and after the animation

div {
  width: 70px;
  height: 50px;
  background-color: green;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-delay: 3s;
  animation-fill-mode: both;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. The animation-duration property sets the animation's runtime for one cycle to five seconds (5s).
3. We used the ease-in-out timing function to apply a slow start and slow end speed to the div's animation.
4. The animation-fill-mode property tells browsers to apply both the forwards and backwards rules.
5. We created change-width's @keyframes ruleset.
6. We defined two keyframes for browsers to use when the div element's animation is at zero percent (0%) and one hundred percent (100%) duration.

What is the CSS animation Property?

We use the animation property as a shorthand for:

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-play-state
• animation-fill-mode

In other words, instead of writing:

div {
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
  animation-iteration-count: 3;
  animation-direction: alternate;
  animation-play-state: running;
  animation-fill-mode: both;
}

You can alternatively use the animation property to shorten your code like so:

div {
  animation: 5s ease-in-out 2s 3 alternate both running change-width;
}

Try Editing It

Here is the animation property's syntax:

animation: animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state animation-name;

Note:

• The way you arrange the time values is essential. Browsers read the first time-value as animation-duration. And they assign the second one to animation-delay.
• It is best to list animation-name last. Otherwise, browsers may assign the animation-name's value to other properties.
• You can apply multiple @keyframes rulesets to an element using the animation property. Here's an example:

div {
  width: 70px;
  height: 70px;
  background-color: green;
  animation: 
    5s ease-in-out 3s 3 alternate both change-width, 
    5s 3s infinite alternate both change-shape, 
    5s 3s infinite rotate-hue;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

@keyframes change-shape {
  from {border-radius: 0%; border: 1px solid blue;}
  to {border-radius: 50%; border: 7px solid green;}
}

@keyframes rotate-hue {
  from {filter: hue-rotate(0deg);}
  to {filter: hue-rotate(360deg);}
}

Try Editing It

The snippet above applied three @keyframes rulesets to the div element using commas (,) to separate each @keyframes' configurations.

Note: We used the hue-rotate() function to rotate the div's colors.

Important Stuff to Know about CSS Transitions and Animations

1. You can't animate all CSS properties. Have a look at MDN's Animatable CSS properties article to see the ones you can animate.
2. CSS transitions and animations are expensive operations for most CSS properties—except opacity and transform. In other words, applying transitions (or animations) to any CSS box model property is inherently a CPU-intensive task. Therefore, animate only opacity, and transform properties if you are concerned about your page's performance.
3. Be mindful of the layout repainting issues that CSS transitions may cause through your elements' stacking order.

Wrapping up

In this article, we discuss the differences between CSS transitions and animations. We also used examples to discuss how to use them.

Thanks for reading.

And here's a useful React TypeScript resource:

I wrote a book about Creating NPM Packages!

It is a beginner-friendly book that takes you from zero to creating, testing, and publishing NPM packages like a pro.

What we will learn

In this article, you're going to master the following concepts:

• How to create circles using the arc method of the canvas context.
• How to utilize the requestAnimationFrame function for smooth circle animations.
• How to harness the power of JavaScript classes to create multiple circles without repeating code.
• How to add stroke styles and fill styles to your circles for a 3D bubble effect.

You can follow along with me, or use the final codepen if you want to take a look at the source code.

If you prefer to learn in a video format, follow along this video:

Getting Started

First things first, we need an HTML5 Canvas element. Canvas is a powerful element for creating shapes, images and graphics. This is what we'll use for creating the bubbles.

Let’s set it up:

<canvas id="canvas"></canvas>

In order to do anything meaningful with canvas, we need to have access to it’s context. Context provides an interface to render objects on the canvas and draw shapes.

Here's how to get access to canvas and it's context.

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

We'll also set up our canvas to use the entire window height and width:

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

Next, we'll give it canvas a nice soothing light blue background by adding some css. This is the only CSS we're going to use. You can also do this with JavaScript if you wish.

#canvas {
  background: #00b4ff;
}

How to Create Bubbles with Canvas

Let’s get to the fun part. We're going to create bubbles by clicking on the canvas. To achieve this, we'll start by creating a click event handler:

canvas.addEventListener('click', handleDrawCircle);

Since we need to know where we clicked on our canvas, we are going to keep track of it in our handleDrawCircle function and use the event’s coordinates:

//We are adding x and y here because we will need it later.
let x, y
const handleDrawCircle = (event) => {
  x = event.pageX;
  y = event.pageY;

  // Draw a bubble!
  drawCircle(x, y);
};

How to Draw Circles Using the arc Method

To create circles, we're going to utilize the arc method available on canvas’s context. The arc method accepts x and y (the center of the circle), a radius, and a start angle and end angle which for us will be 0 and 2* Math.PI respectively because we're creating a full circle.

That is:

const drawCircle = (x, y) => {
  context.beginPath();
  context.arc(x, y, 50, 0, 2 * Math.PI);

  context.strokeStyle = 'white';
  context.stroke();
};

circles created using the arc method

How to Move Circles Using the requestAnimationFrame Method

Now that we have circles, let's make them move because...

Remember that when we created a circle, we used the arc method which accepted x and y coordinates — the center of the circle. If we move the x and y coordinate of our circle really fast, it will give an impression that the circles are moving. Let’s try that!

//Define a speed by which to increment to the x and y coordinates

const dx = Math.random() * 3;
const dy = Math.random() * 7;

//Incremenet the center of the circle with this speed
x = x + dx;
y = y - dy;

We can move this inside a function:

let x, y;

const move = () => {
  const dx = Math.random() * 3;
  const dy = Math.random() * 7;

  x = x + dx;
  y = y - dy;
};

To give our circle a seamless movement, we're going to create an animate function and use the browser's requestAnimationFrame method to create a moving circle:

const animate = () => {
  context.clearRect(0, 0, canvas.width, canvas.height);

  move();
    drawCircle(x,y);

  requestAnimationFrame(animate);
};

//Don't forget to call animate at the bottom 
animate();

moving circles created with requestAnimationFrame method

How to Create Particles Using a Particle Class

Now that we have created one circle, it’s time to create multiple circles! But before we do that, let's prepare our code.

In order to avoid repeating our code, we are going to use classes and introduce a Particle class. Particles are the building blocks of our dynamic artwork and animation. Each bubble is a particle with its own position, size, movement, and color attributes. Let's define a Particle class to encapsulate these properties:

class Particle {
  constructor(x = 0, y = 0) {}

  draw() {
    // Drawing the particle as a colored circle
    // ...
  }

  move() {
    // Implementing particle movement
    // ...
  }
}

Let’s move some of the constants we had set up to the Particle class:

class Particle {
  constructor(x = 0, y = 0) {
    this.x = x;
    this.y = y;
    this.radius = Math.random() * 50;
    this.dx = Math.random() * 3;
    this.dy = Math.random() * 7;
  }

  draw() {
    // Drawing the particle as a colored circle
    // ...
  }

  move() {
    // Implementing particle movement
    // ...
  }
}

The draw method will be responsible for rendering the particle on the canvas. We have already implemented this functionality in drawCircle, so let’s move it in our class and update the variables to be class variables:

class Particle {
  constructor(x = 0, y = 0) {
    this.x = x;
    this.y = y;
    this.radius = Math.random() * 50;
    this.dx = Math.random() * 3;
    this.dy = Math.random() * 7;
    this.color = 'white';
  }

  draw() {
    context.beginPath();
    context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    context.strokeStyle = this.color;
    context.stroke();

    context.fillStyle = this.color;
    context.fill();
  }

  move() {}
}

Similarly, let’s move the move function within the class:

move() {
    this.x = this.x + this.dx;
    this.y = this.y - this.dy;
}

Next, we need to make sure that we are calling the Particle class in our event handler:

const handleDrawCircle = (event) => {
  const x = event.pageX;
  const y = event.pageY;

  const particle = new Particle(x, y);
};

canvas.addEventListener('click', handleDrawCircle);

Since we need to access this particle in our animate function in order to call the move method on it, we'll store this particle in an array called particleArray. This array will also be helpful when creating lots of particles.

Here’s the updated code to reflect this:

const particleArray = [];

const handleDrawCircle = (event) => {
  const x = event.pageX;
  const y = event.pageY;

  const particle = new Particle(x, y);
  particleArray.push(particle);
};

canvas.addEventListener('click', handleDrawCircle);

Remember to update the animate function too:

const animate = () => {
    context.clearRect(0, 0, canvas.width, canvas.height);

    particleArray.forEach((particle) => {
        particle?.move();
        particle?.draw();
    });

    requestAnimationFrame(animate);
};

At this point, you will see these particles on your screen:

Awesome! Now, to the fun part! Let's creates lots of circles and style them to make them look like bubbles.

To create lots of bubbles, we are going to create particles using a for loop and add them to the particleArray we had created.

const handleDrawCircle = (event) => {
  const x = event.pageX;
  const y = event.pageY;

  for (let i = 0; i < 50; i++) {
    const particle = new Particle(x, y);
    particleArray.push(particle);
  }
};

canvas.addEventListener('click', handleDrawCircle);

In the animate function, we'll continuously update the canvas by clearing it and redrawing the particles in their new positions. This will give an illusion of the circle moving:

const animate = () => {
  context.clearRect(0, 0, canvas.width, canvas.height);

  particleArray.forEach((particle) => {
    particle?.move();
    particle?.draw();
  });

  requestAnimationFrame(animate);
};

animate();

Now that we have bubbles moving, it’s time to add color to them to make them look like actual bubbles!

We will do this by adding a gradient fill to the bubbles. This can be done using the context.createRadialGradient method:

const gradient = context.createRadialGradient(
  this.x,
  this.y,
  1,
  this.x + 0.5,
  this.y + 0.5,
  this.radius
);

gradient.addColorStop(0.3, 'rgba(255, 255, 255, 0.3)');
gradient.addColorStop(0.95, '#e7feff');

context.fillStyle = gradient;

Here’s the final codepen if you want to take a look at the source code.

Wrap Up

Congratulations! You've just created something super fun using only HTML Canvas and JavaScript. You've learned how to use the arc method, how to leverage the requestAnimationFrame method, how to harness the power of JavaScript classes, and how to style your bubbles using gradients for the 3D bubble effect.

Feel free to experiment with colors, speeds, and sizes to make your animations truly unique.

I hope you had as much fun following this tutorial as I did creating it. Now, it's your turn to experiment. I would love to see if you tried this out and what you created. Share with me your code link and I would love to check it out.

And now a #DevJoke:

Question - Who won the debate for the best name for loop variable?

Answer - i won.

If you enjoyed this article, share it with someone who will benefit from it.

If you are interested in articles like this and front-end articles on JavaScript, React, GraphQL or Accessibility and career advice from a Staff Engineer, sign up for my newsletter and get these directly in your inbox.

Carousels can help you save space as well as enhance your User Interface and provide a great user experience.

Carousels have become a staple in UI design, often used to display images, testimonials, and more. They are indispensable when creating an engaging and dynamic interface.

In this article, we'll dive into the process of building an image carousel using React and Framer Motion, guiding you through every step to create a stunning and interactive visual component for your application.

What is Framer Motion?

This is an open-source animation library for React applications that you can use to create dynamic and responsive animations for our web application.

Framer motion has several helpful features, including:

1. Animation: This allows you to do seamless transitions for your components.
2. Gesture: It supports touch and mouse motions, which allows you to account for certain events.
3. Variants: Framer motion enables you to declare components declaratively, keeping your code organized and reusable.

All these features are very useful and we will see them in action soon.

To gain a deeper understanding of Framer Motion, you can explore its documentation and resources. But for this article, we'll focus on the fundamentals. As I guide you through the basics of utilizing Framer Motion, my primary goal is to build an impressive and engaging image carousel.

How to Set Up Your Development Environment

The first thing we are gonna do is to set up your development Environment. This involves installing the necessary packages to successfully build your application. This includes installing Node.js and npm

If you already have Node.js and npm installed, you don't need to download and install them again.

Create a React application

At this point, I will assume you have Node and npm installed. To create a React application, simply go to your terminal and visit the directory you want your application to be in. Then run this command:

npx create-react-app react-image-carousel

You can name your application whatever you want – but for the purpose of this article I will be calling it react-image-carousel.

When your React application is successfully created, open up your directory in your code editor. You should get some default files and styles and it should look something like this:

We won't need most of these files and styles for this project so you can clear up files like the: app.test.js, and logo.svg, and reportWebVitals.js,setupTest.js. You can also delete all the default styles in the App.css sheet.

Now that your React application is created and set up, the last step in setting up your development environment for this project is installing Framer motion.

To do this, simply go to your terminal make sure you are in the project directory and run this command:

 npm  install framer-motion

and this should install the latest version of Framer Motion. Now you should be good to go. Simply use npm run start to fire the development server on your browser.

How to Design the Image Carousel Component

To kick off the design we will first create a Carousel.js component. In the carousel component, we will import the useState hook from React and then the motion and AnimatePresence properties from Framer Motion.

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";

We then create our carousel function which takes in the images prop which will be an array of image URLs:

const Carousel = ({ images }) => {};

In our carousel function, we initialize a state variable with useState to keep track of the current image index we use setCurrentIndex as the corresponding function to update the index.

Next, we create 3 helper functions to handle user interactions which include:

• handleNext: this updates the currentIndex to the next index in order to change the image and if it reaches the end of the array it cycles back.
• handlePrevious: this does the same as the handleNext function, but this time in reverse order. This allows us to go back to images.
• handleDotClick: this takes an index as a parameter and updates the currentIndex. With this, we can jump forward and backward to images just by clicking the dots.

const Carousel = ({ images }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  const handleNext = () => {
    setCurrentIndex((prevIndex) =>
      prevIndex + 1 === images.length ? 0 : prevIndex + 1
    );
  };
  const handlePrevious = () => {
    setCurrentIndex((prevIndex) =>
      prevIndex - 1 < 0 ? images.length - 1 : prevIndex - 1
    );
  };
  const handleDotClick = (index) => {
    setCurrentIndex(index);
  };

These are the helper functions we will need for our component

How to Create our Template

Our template is a pretty simple one and is made up of our image, our slider direction, and the dots (indicator).

  return (
    <div className="carousel">
        <img
          key={currentIndex}
          src={images[currentIndex]}
        /><div className="slide_direction">
        <div className="left" onClick={handlePrevious}>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            height="20"
            viewBox="0 96 960 960"
            width="20"
          >
            <path d="M400 976 0 576l400-400 56 57-343 343 343 343-56 57Z" />
          </svg>
        </div>
        <div className="right" onClick={handleNext}>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            height="20"
            viewBox="0 96 960 960"
            width="20"
          >
            <path d="m304 974-56-57 343-343-343-343 56-57 400 400-400 400Z" />
          </svg>
        </div>
      </div>
      <div className="indicator">
        {images.map((_, index) => (
          <div
            key={index}
            className={`dot ${currentIndex === index ? "active" : ""}`}
            onClick={() => handleDotClick(index)}
          ></div>
        ))}
      </div>
    </div>
  );

As you can see in the template, we display the image at the current index. Then we have a div of slider_direction which holds two divs with class names left and right. We created these as navigation buttons for the carousel. They use inline SVGs to display arrow icons, and their onClick handlers are set to handlePrevious and handleNext, respectively.

We also have an indicator div which we created to display a series of dots that represent each image in the carousel. It maps over the images array and creates a dot for each image, setting the active class for the dot corresponding to the currentIndex.

We then attached an onClick handler for each dot which is set to call handleDotClick with the index of the dot.

And that should be our template, for now. All that is left is to export the carousel component, import it into the App.js component, and add some CSS. Then we will be ready to start animating.

So we simply export our carousel function from our Carousel.js component.

export default Carousel;

How to Use the Carousel Component

We have created our carousel component. But to use it we have to import it into our App.js component:

import Carousel from "./Carousel";

After that, we can create our images array, which will hold our image URLs.

const images = [
  "https://images.pexels.com/photos/169647/pexels-photo-169647.jpeg?auto=compress&cs=tinysrgb&w=600",
  "https://images.pexels.com/photos/313782/pexels-photo-313782.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
  "https://images.pexels.com/photos/773471/pexels-photo-773471.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
  "https://images.pexels.com/photos/672532/pexels-photo-672532.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
  "https://images.pexels.com/photos/632522/pexels-photo-632522.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
  "https://images.pexels.com/photos/777059/pexels-photo-777059.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
];

These are just images I got from pexels – that's what we are gonna use for this project.

Next, we add our App function which will hold our application template.

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Image Carousel using React and Framer Motion</h1>
      </header>
      <main>
        <Carousel images={images} />
      </main>
    </div>
  );
}
export default App;

As you can see, we have our header that just displays a header showing what our application is about.

Then we have the main section which has our carousel component added and takes in a prop of the images array. If you recall, this was the prop we used in our carousel component to display images.

Lastly, we export the App component so we can use it in the index.js file.

To see all this together with no styling, run the npm run start command. The application should look like this:

Ugly right? Yes, I agree with you. But with just a few lines of CSS, this will be transformed. So let's dive in.

How to Add the CSS

I don't want to create a separate style sheet for the carousel component, so we will do all our CSS in the App.css file. Don't forget to import your style sheet.

import "./App.css"

This is our CSS:

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap");
.App-header {
  font-size: 1rem;
  text-align: center;
  font-family: "Oswald", sans-serif;
  padding-bottom: 2rem;
}
.carousel-images {
  position: relative;
  border-radius: 10px;
  height: 400px;
  max-width: 650px;
  margin: auto;
  overflow: hidden;
}
.carousel-images img {
  width: 99%;
  height: 99%;
  border-radius: 8px;
  border: #ff00008e solid 2px;
}
.slide_direction {
  display: flex;
  justify-content: space-between;
}
.left,
.right {
  background-color: #fb666675;
  color: #fff;
  padding: 10px 8px 8px 13px;
  margin: 0 20px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 10px;
  height: 25px;
  width: 25px;
}
.left {
  left: 0;
}
.right {
  right: 0;
}
.carousel-indicator {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
}
.dot {
  background-color: #333;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
.active {
  background-color: #fa2020;
}

And here is the result with our CSS:

You'll probably agree that this looks a whole lot better and is already fully functional.

Now let's move on to adding our animation using Framer Motion to give it a nice sliding look.

How to Add Animation to the Carousel Component

To start animating with Framer Motion there are a few concepts you must be familiar with because we will be using them often in this section. These concepts include:

• Variants: Think of a variant as a named group of properties. Its job is to define how an element should appear or animate. You can create different variants to represent different visual states or animations for an element, like open, closed, hover, and so on.
• Initial: This is simply the state your object will posses before the animation kicks in.
• Animate: This is simply the state your object will animate to, it's as simple as that.

Back to the project, we'll add our animations to our carousel component. We have already imported the two properties which we will be needing – the motion and AnimatePresence properties.

I will be breaking this section into three parts because we will be adding animation to three parts of our code, including the image, the slider directions, and the indicator dot.

Image Animation

To animate the exit and entrance of an image, we need to wrap our img element with an AnimationPresence component. This enables us to add animation whenever an image leaves or enters. Then we attach a motion. to our tag just like this.

 <AnimatePresence>
  <motion.img key={currentIndex} src={images[currentIndex]} />
</AnimatePresence>;

Next, we go outside our template and declare our variants.

  const slideVariants = {
    hiddenRight: {
      x: "100%",
      opacity: 0,
    },
    hiddenLeft: {
      x: "-100%",
      opacity: 0,
    },
    visible: {
      x: "0",
      opacity: 1,
      transition: {
        duration: 1,
      },
    },
    exit: {
      opacity: 0,
      scale: 0.8,
      transition: {
        duration: 0.5,
      },
    },
  };

As you can see, the sliderVariants has four properties:

• hiddenRight: this sets the opacity of the image to 0 and places it at the right side of the container.
• hiddenLeft: this does the same as the hiddenRight but this time it's set on the left side.
• visible: this is the property that will be called for the slide animation to happen from whichever position the image is to the center of the container.
• exit: this animation controls the removal of the image from the screen as another image slides in.

Now our variants are set. How do we tell where the image should slide in from? We need to set a direction state and update the state based on which of the slide_directions was clicked.

  const [direction, setDirection] = useState('left');

So we set the direction to start at the left. This is only logical since the first image to be displayed will be the first image. Then we go over to our helper function and set the direction depending on which direction was clicked.

  const handleNext = () => {
    setDirection("right");
    setCurrentIndex((prevIndex) =>
      prevIndex + 1 === images.length ? 0 : prevIndex + 1
    );
  };

  const handlePrevious = () => {
    setDirection("left");

    setCurrentIndex((prevIndex) =>
      prevIndex - 1 < 0 ? images.length - 1 : prevIndex - 1
    );
  };

  const handleDotClick = (index) => {
    setDirection(index > currentIndex ? "right" : "left");
    setCurrentIndex(index);
  };

You may have noticed that we didn't just set the state for the handleNext and handlePrevious. We also did for the handleDotClick. So whenever a previous or next dot is clicked the direction will be set accordingly.

Just a reminder – the purpose of direction is to set the initial state of the image so the slider can work as it ought to.

Now that our direction is set, let's use our variants in our img element.

<AnimatePresence>
          <motion.img
            key={currentIndex}
            src={images[currentIndex]}
            variants={slideVariants}
            initial={direction === "right" ? "hiddenRight" : "hiddenLeft"}
            animate="visible"
            exit="exit"
          />
        </AnimatePresence>

So we add the variants prop and set it equal to the slideVariants we created. Then we added the initial prop and set it equal to a ternary operator. This sets the initial state of the image to either be hiddenRight or hiddenLeft depending on which of the slider_direction or dot was clicked.

Next, we add the animate property, which animates the image from the initial position to the position we set in the visible property.

Lastly, we add our exit property and set it to exit. This animates the image out of the screen when a new image enters.

There are lots of props you can use when working with Framer Motion. You can check the documentation to learn more about them.

And with that in place, our image carousel should be working perfectly.

Sliders and Dots Animation

We could stop here, but I just want to add a few animations to my slide directions and dots.

  const slidersVariants = {
    hover: {
      scale: 1.2,
      backgroundColor: "#ff00008e",
    },
  }; 
const dotsVariants = {
    initial: {
      y: 0,
    },
    animate: {
      y: -10,
      scale: 1.3,
      transition: { type: "spring", stiffness: 1000, damping: "10" },
    },
    hover: {
      scale: 1.1,
      transition: { duration: 0.2 },
    },
  };

As usual, first we create our variants. For the slidersVariants we just add a hover property. For the dotsVariants we have three properties: initial, animate, and hover.

Just like we did with the img element, we will add motion. as a prefix to the element name in order to use Framer Motion.

<div className="slide_direction">
  <motion.div
    variants={slidersVariants}
    whileHover="hover"
    className="left"
    onClick={handlePrevious}
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height="20"
      viewBox="0 96 960 960"
      width="20"
    >
      <path d="M400 976 0 576l400-400 56 57-343 343 343 343-56 57Z" />
    </svg>
  </motion.div>
  <motion.div
    variants={slidersVariants}
    whileHover="hover"
    className="right"
    onClick={handleNext}
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height="20"
      viewBox="0 96 960 960"
      width="20"
    >
      <path d="m304 974-56-57 343-343-343-343 56-57 400 400-400 400Z" />
    </svg>
  </motion.div>
</div>;

As you can see, we added our variants and set it equal to slidersVariants. Then we used a new property whileHover and set it equal to the over property we specified in our slidersVariants object.

<motion.div
  key={index}
  className={`dot ${currentIndex === index ? "active" : ""}`}
  onClick={() => handleDotClick(index)}
  initial="initial"
  animate={currentIndex === index ? "animate" : ""}
  whileHover="hover"
  variants={dotsVariants}
></motion.div>;

Here we didn't just add a whileHover prop. We also added an initial prop and an animate prop that animates the current image dot so it stands out.

In our slidersVariants object, we specified a transition type of spring which gives it the bouncy nature when the animation transition takes place.

Add all this together and our sleek Image Carousel is ready. Here is the final result:

Just for reference, this is the full code of the carousel component:

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";

const Carousel = ({ images }) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [direction, setDirection] = useState(null);

  const slideVariants = {
    hiddenRight: {
      x: "100%",
      opacity: 0,
    },
    hiddenLeft: {
      x: "-100%",
      opacity: 0,
    },
    visible: {
      x: "0",
      opacity: 1,
      transition: {
        duration: 1,
      },
    },
    exit: {
      opacity: 0,
      scale: 0.8,
      transition: {
        duration: 0.5,
      },
    },
  };
  const slidersVariants = {
    hover: {
      scale: 1.2,
      backgroundColor: "#ff00008e",
    },
  };
  const dotsVariants = {
    initial: {
      y: 0,
    },
    animate: {
      y: -10,
      scale: 1.2,
      transition: { type: "spring", stiffness: 1000, damping: "10" },
    },
    hover: {
      scale: 1.1,
      transition: { duration: 0.2 },
    },
  };

  const handleNext = () => {
    setDirection("right");
    setCurrentIndex((prevIndex) =>
      prevIndex + 1 === images.length ? 0 : prevIndex + 1
    );
  };

  const handlePrevious = () => {
    setDirection("left");

    setCurrentIndex((prevIndex) =>
      prevIndex - 1 < 0 ? images.length - 1 : prevIndex - 1
    );
  };

  const handleDotClick = (index) => {
    setDirection(index > currentIndex ? "right" : "left");
    setCurrentIndex(index);
  };

  return (
    <div className="carousel">
        <div className="carousel-images">
        <AnimatePresence>
          <motion.img
            key={currentIndex}
            src={images[currentIndex]}
            initial={direction === "right" ? "hiddenRight" : "hiddenLeft"}
            animate="visible"
            exit="exit"
            variants={slideVariants}
          />
        </AnimatePresence>
        <div className="slide_direction">
          <motion.div
            variants={slidersVariants}
            whileHover="hover"
            className="left"
            onClick={handlePrevious}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              height="20"
              viewBox="0 96 960 960"
              width="20"
            >
              <path d="M400 976 0 576l400-400 56 57-343 343 343 343-56 57Z" />
            </svg>
          </motion.div>
          <motion.div
            variants={slidersVariants}
            whileHover="hover"
            className="right"
            onClick={handleNext}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              height="20"
              viewBox="0 96 960 960"
              width="20"
            >
              <path d="m304 974-56-57 343-343-343-343 56-57 400 400-400 400Z" />
            </svg>
          </motion.div>
        </div>
      </div>
      <div className="carousel-indicator">
        {images.map((_, index) => (
          <motion.div
            key={index}
            className={`dot ${currentIndex === index ? "active" : ""}`}
            onClick={() => handleDotClick(index)}
            initial="initial"
            animate={currentIndex === index ? "animate" : ""}
            whileHover="hover"
            variants={dotsVariants}
          ></motion.div>
        ))}
      </div>
    </div>
  );
};
export default Carousel;

Check out the Git Repository on GitHub.

Here is the site on Netlify.

Just a note that there are accessibility issues with this code, and so it shouldn't be used in a production environment.

Resources

I understand that there might be some terms or syntax that might be unclear, especially if you are new to React or new to using Framer Motion. Here are some resources I would recommend if you want to learn more:

• React Documentation
• Framer Motion Documentation
• Framer Motion Course

Conclusion

In this article, we explored the process of designing an engaging and responsive image carousel using the powerful combination of React and Framer Motion, an animation and gesture library.

By incorporating components like motion and AnimationPresence, we wear able to walk through the steps to build a visually appealing carousel. This carousel showcases our images and delivers smooth transitions between images with captivating animations for an enhanced user experience.

One powerful tool in a developer's arsenal is the accordion component, a versatile and widely-used element found on nearly every website.

In this article, we'll explore how to create a dynamic and visually-stunning accordion component using React and the GreenSock Animation Platform library (GSAP).

By combining the flexibility of React with the animation capabilities of GSAP, we'll craft a seamless and immersive user experience that will leave your visitors wanting more. So buckle up and get ready to advance your web development skills!

Prerequisites

• Fundamentals of HTML and CSS
• Fundamentals of ES6 JavaScript
• Fundamentals of React and React Hooks.

What We'll Cover:

1. What is an accordion component?
2. The importance of accordion components in web design
3. A quick overview of React and GSAP
4. How to set up your development environment
5. Breakdown of the project
   – The user interface section
   – The functionality section
   – The animation section
6. Conclusion

What is an Accordion Component?

An accordion component is a UI element used to present a list of items in a compact manner. It consists of a vertical list of headers that expand and collapse their corresponding content when clicked.

This type of component is helpful because it allows users to quickly scan a list and expand only relevant items.

The Importance of Accordion Components in Web Design

Accordion components have become an essential part of modern web design, as they allow website developers to display large amounts of information in a compact and organized way.

Accordion components are particularly useful for content-heavy websites where users may become overwhelmed by too much information on a single page.

They also serve uses such as:

• Navigation: Accordion components provide a simple and intuitive way for users to navigate through a website. By organizing content into collapsible sections, users can quickly find what they are looking for, without having to scroll through long pages.
• Space-saving: Accordion components help save screen real estate by allowing website designers and developers to display multiple sections of content in a compact form factor. This is particularly important for mobile devices, where screen real estate is limited.
• User experience: Accordion components can help improve the user experience by reducing clutter and making it easier for users to find the information they need. By keeping the user interface clean and organised, users are less likely to become overwhelmed or frustrated. Additionally, the interactive nature of accordion components can make the user experience more engaging and enjoyable.

A Quick Overview of React and GSAP

React is a JavaScript framework that streamlines the creation of dynamic user interfaces. It achieves this by enabling developers to create individual, reusable components that can be pieced together to form intricate and interactive interfaces.

This process involves breaking down the interface into smaller components that are more manageable and can be updated independently without affecting the entire UI.

GSAP, also known as GreenSock Animation Platform, is a JavaScript library designed to create high-quality animations and interactive experiences on the web.

This library offers a comprehensive set of tools to produce animations that are visually appealing and optimized for performance. With GSAP, developers can create animations with precision and have complete control over the animation's behaviour.

When used together, React and GSAP can create highly interactive and visually stunning user interfaces, such as accordion components. React provides the framework for creating the accordion component, while GSAP provides the tools for animating the component and making it interactive.

How to Set Up Your Development Environment

Before you can begin creating components in a React application, you need to set up your development environment. This includes installing Node.js and npm (Node Package Manager) on your computer.

How to Create a React Project

After installing Node.js and npm, you can use the Create React App command-line tool to create a new React project. In your local terminal, run the command:

npx create-react-app react-gsap-dropdown

Then, open that folder with your code editor. This is what it should look like:

Initial view after creating react app

Note: I'll be using the VSCode Editor for development in this tutorial, but any modern text editor should be sufficient.

Following that, remove all of the boilerplate styles and unnecessary files from your app.

After clearing clutter files and styles

The next step in the setup process is to install GSAP in your React app. Simply open the terminal in your code editor and run:

npm install gsap

Installing gsap

All that remains is to run npm start, which launches a development server in your browser and displays a blank page.

Breakdown of the Project

Before you begin building your project, it is important to understand that it is divided into three parts:

• The User Interface section
• The Functionality section
• The Animation section

The User Interface Section

This section includes all of the mockups and styling needed to render your component on the page. Here’s a step-by-step of this section’s progress

First, create a parent element in your App component called accordion__container. This element holds all the accordion items you wish to create.

Next, create three child items representing each accordion item which you would make expandable based on user interaction. So far your code structure should look something like this;

<div className="App">
    <div className="accordion__container">
       <div className="accordion__item"></div>
       <div className="accordion__item"></div>
       <div className="accordion__item"></div>
    </div>
</div>

In each accordion item, nest two child elements, the accordion__header and accordion__details. The accordion__header will hold the information displayed when the accordion__item is compact, and the accordion__details will hold the information when it’s expanded.

<div className="App">
    <div className="accordion__container">
       <div className="accordion__item"> 
          <div className="accordion__header"></div>
          <div className="accordion__details"></div>
       <div className="accordion__item">
          <div className="accordion__header"></div>
          <div className="accordion__details"></div>
       </div>
       <div className="accordion__item"> 
          <div className="accordion__header"></div>
          <div className="accordion__details"></div>
       </div>
    </div>
</div>

Adding content to both child elements gives you the following code:

<div className="accordion__container">
        <div className="accordion__item">
          <div className="accordion__header">
            <p className="accordion__number">01</p>
            <p className="accordion__name">The World's Tallest Building</p>
          </div>

          <div className="accordion__details">
            <ul>
              <li>
                The current tallest building in the world is the Burj Khalifa,
                located in Dubai, United Arab Emirates.
              </li>
              <li>
                It stands at a height of 828 meters (2,716 feet) tall and has
                163 floors.
              </li>
              <li>
                The building took six years to construct and was completed in
                2010.
              </li>
            </ul>
          </div>
        </div>

        <div className="accordion__item">
          <div className="accordion__header">
            <p className="accordion__number">02</p>
            <p className="accordion__name">
              Famous Inventors and Their Inventions
            </p>
          </div>
          <div className="accordion__details">
            <ul>
              <li>
                Nikola Tesla, a Serbian-American inventor, is credited with the
                invention of the AC (alternating current) electrical system.
              </li>
              <li>
                Thomas Edison, an American inventor, is credited with the
                invention of the light bulb.
              </li>
              <li>
                Alexander Graham Bell, a Scottish-born American inventor, is
                credited with the invention of the telephone.
              </li>
            </ul>
          </div>
        </div>
        <div className="accordion__item">
          <div className="accordion__header">
            <p className="accordion__number">03</p>
            <p className="accordion__name">Largest Deserts in the World</p>
          </div>
          <div className="accordion__details">
            <ul>
              <li>
                The Sahara Desert, located in Africa, is the largest hot desert
                in the world and covers an area of 9.2 million square kilometers
                (3.6 million square miles).
              </li>
              <li>
                The Antarctic Desert, located in Antarctica, is the largest cold
                desert in the world and covers an area of 14 million square
                kilometers (5.4 million square miles).
              </li>
              <li>
                The Arabian Desert, located in the Middle East, is the
                third-largest desert in the world and covers an area of 2.33
                million square kilometers (900,000 square miles).
              </li>
            </ul>
          </div>
        </div>
      </div>

We added a number and name element to the accordion__header element, and an unordered list with list items to the accordion__details element.

Taking a look at the component in your browser, you should see this:

Initial component render with no styling

At the moment, your component doesn’t look like much, so add the styling below.

@import url("https://fonts.googleapis.com/css2?family=Dongle:wght@300;400&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Dongle", sans-serif;
}
.App {
  min-height: 100vh;
  display: flex;
  justify-content: center;
}
.accordion__container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 25px;
}
.accordion__item {
  display: flex;
  flex-direction: column;
  width: 750px;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
  border-top: 4px solid transparent;
}
.accordion__header {
  display: flex;
  gap: 2rem;
  align-items: center;
  cursor: pointer;
  padding: 1rem 2rem;
}
.accordion__header:hover {
  background: #e7eaed;
}
.accordion__number {
  font-size: 40px;
  color: #ced4da;
}
.accordion__name {
  flex: 1;
  font-size: 40px;
}
.accordion__details {
  padding: 0 2rem;
}
.accordion__details ul {
  font-size: 30px;
  padding: 1rem 2rem;
  list-style-type: circle;
}

This styling gives the accordion__container a fixed width and uses some Flexbox techniques together with basic CSS to give the component a nicer-looking appearance.

Rendered component with styling added

As you can see, your component is already well laid out and more appealing to users. But all the details of each accordion item are visible without any human interaction.

To solve this, you'll want to hide all the content in each accordion__details container by reducing its height and hiding any overflow.

.accordion__details {
  overflow: hidden;
  height: 0;
}

This code produces this result:

Component after hiding details

With this, you’ve concluded the interface section and can now move on to dynamically revealing the content of any accordion item you click on.

The Functionality Section

In this section, we’re going to tackle the following:

• Dynamically display the details of each accordion based on a user’s click.
• Ensure only one accordion tab is open at a time

Starting off, create an open class which will contain styles that only the currently clicked accordion will have. This class will be added to any accordion item you click on.

.open {
  border-color: #087f5b;
}

.open .accordion__header,
.open .accordion__number {
  color: #087f5b;
}

.open .accordion__details {
  height: auto;
}

Then you'll create a variable with the useState hook. This hook is used to hold the current state of an accordion item (that is, if it’s open or not).

const [openAccordion, setOpenAccordion] = useState(null);

After that, create a callback function that takes in a distinct index value from each accordion__item and compares it with the value in your state variable (openAccordion). The way the function works is, if the index value is distinct from the openAccordion value, the function sets the openAccordion value to the index value, else it sets the openAccordion to null.

 const handleAccordionClick = (index) => {
    if (index !== openAccordion) {
        setOpenAccordion(index);
     } else {
       setOpenAccordion(null);
    }
  };

This logic is used to conditionally render a class in your markup (that is, add or remove a class based on the item you click on). To make this function work, you use an onClick event on each accordion__header, and call each handleAccordionClick with a distinct index value.

<div className="accordion__container">
        <div className="accordion__item">
          <div
            className="accordion__header"
             // HERE
            onClick={() => handleAccordionClick(0)}
          >
            <p className="accordion__number">01</p>
            <p className="accordion__name">The World's Tallest Building</p>
          </div>

          <div className="accordion__details">
            <ul>
              <li>
                The current tallest building in the world is the Burj Khalifa,
                located in Dubai, United Arab Emirates.
              </li>
              <li>
                It stands at a height of 828 meters (2,716 feet) tall and has
                163 floors.
              </li>
              <li>
                The building took six years to construct and was completed in
                2010.
              </li>
            </ul>
          </div>
        </div>

        <div className="accordion__item">
          <div
            className="accordion__header"
             // HERE
            onClick={() => handleAccordionClick(1)}
          >
            <p className="accordion__number">02</p>
            <p className="accordion__name">
              Famous Inventors and Their Inventions
            </p>
          </div>
          <div className="accordion__details">
            <ul>
              <li>
                Nikola Tesla, a Serbian-American inventor, is credited with the
                invention of the AC (alternating current) electrical system.
              </li>
              <li>
                Thomas Edison, an American inventor, is credited with the
                invention of the light bulb.
              </li>
              <li>
                Alexander Graham Bell, a Scottish-born American inventor, is
                credited with the invention of the telephone.
              </li>
            </ul>
          </div>
        </div>
        <div className="accordion__item">
          <div
            className="accordion__header"
            // HERE
            onClick={() => handleAccordionClick(2)}
          >
            <p className="accordion__number">03</p>
            <p className="accordion__name">Largest Deserts in the World</p>
          </div>
          <div className="accordion__details">
            <ul>
              <li>
                The Sahara Desert, located in Africa, is the largest hot desert
                in the world and covers an area of 9.2 million square kilometers
                (3.6 million square miles).
              </li>
              <li>
                The Antarctic Desert, located in Antarctica, is the largest cold
                desert in the world and covers an area of 14 million square
                kilometers (5.4 million square miles).
              </li>
              <li>
                The Arabian Desert, located in the Middle East, is the
                third-largest desert in the world and covers an area of 2.33
                million square kilometers (900,000 square miles).
              </li>
            </ul>
          </div>
        </div>
      </div>

To confirm your logic, log both the openAccordion value and the index value to the console, and click on each accordion item.

  const handleAccordionClick = (index) => {
    console.log(openAccordion, index);
    if (index !== openAccordion) {
      setOpenAccordion(index);
    } else {
      setOpenAccordion(null);
    }
  };

Testing the accordion logic

As you can see, clicking on the first item logs the current value of the openAccordion (null) and the current index (0) to the console. It also sets the value of openAccordion to the current index.

When you click on the next item, you notice that the openAccordion value was set to the previous index, implying that the value of the openAccordion was conditionally altered based on the user’s click.

Finally, clicking on the same element twice first sets the openAccordion to that element’s index, then to null since the else block of the function is fired when openAccordion === index.

To show the content of each accordion__item, use a ternary operator to conditionally add the open class to each item.

<div className="App">

      <div className="accordion__container">
        <div
        // HERE
          className={`accordion__item  ${openAccordion === 0 ? "open" : ""}`}
        >
          <div
            className="accordion__header"
            onClick={() => handleAccordionClick(0)}
          >
            <p className="accordion__number">01</p>
            <p className="accordion__name">The World's Tallest Building</p>
          </div>

          <div className="accordion__details">
            <ul>
              <li>
                The current tallest building in the world is the Burj Khalifa,
                located in Dubai, United Arab Emirates.
              </li>
              <li>
                It stands at a height of 828 meters (2,716 feet) tall and has
                163 floors.
              </li>
              <li>
                The building took six years to construct and was completed in
                2010.
              </li>
            </ul>
          </div>
        </div>

        <div
        // HERE
          className={`accordion__item  ${openAccordion === 1 ? "open" : ""}`}
        >
          <div
            className="accordion__header"
            onClick={() => handleAccordionClick(1)}
          >
            <p className="accordion__number">02</p>
            <p className="accordion__name">
              Famous Inventors and Their Inventions
            </p>
          </div>
          <div className="accordion__details">
            <ul>
              <li>
                Nikola Tesla, a Serbian-American inventor, is credited with the
                invention of the AC (alternating current) electrical system.
              </li>
              <li>
                Thomas Edison, an American inventor, is credited with the
                invention of the light bulb.
              </li>
              <li>
                Alexander Graham Bell, a Scottish-born American inventor, is
                credited with the invention of the telephone.
              </li>
            </ul>
          </div>
        </div>
        <div
        // HERE
          className={`accordion__item  ${openAccordion === 2 ? "open" : ""}`}
        >
          <div
            className="accordion__header"
            onClick={() => handleAccordionClick(2)}
          >
            <p className="accordion__number">03</p>
            <p className="accordion__name">Largest Deserts in the World</p>
          </div>
          <div className="accordion__details">
            <ul>
              <li>
                The Sahara Desert, located in Africa, is the largest hot desert
                in the world and covers an area of 9.2 million square kilometers
                (3.6 million square miles).
              </li>
              <li>
                The Antarctic Desert, located in Antarctica, is the largest cold
                desert in the world and covers an area of 14 million square
                kilometers (5.4 million square miles).
              </li>
              <li>
                The Arabian Desert, located in the Middle East, is the
                third-largest desert in the world and covers an area of 2.33
                million square kilometers (900,000 square miles).
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

The ternary operator checks if each index value matches the openAccordion value and adds the open class to the accordion__item if it does.

Testing your accordion component now gives the following result:

Working accordion without animation

As you can see, your accordion is already fully functional. Due to the logic you implemented with the ternary operator, only one accordion item can be opened at a time. Kudos!

Alas, your component is a little boring, right? It probably looks like every other accordion you’ve seen out there. So let’s spice up yours and make it the talk of the tech community by animating it 😉.

The Animation Section

At the moment when you toggle in the open class, the accordion__details element goes from showing no content to the full content in a split second without any animation whatsoever. It does this by alternating the value of the height from 0 to auto.

To make the accordion more interactive, you’ll use GSAP to animate the height of each accordion component when an accordion item is clicked.

Start by creating a reference of all the accordion items:

const accordionRefs = useRef([]);

Note: The useRef hook takes in an array because you’re selecting multiple elements. To distinctively target each element, use a ref attribute and pass in each individual index in the ref.

<div className="App">
      <div className="accordion__container">
        <div
          className={`accordion__item  ${openAccordion === 0 ? "open" : ""}`}
           // HERE
          ref={(el) => (accordionRefs.current[0] = el)}
        >
          <div
            className="accordion__header"
            onClick={() => handleAccordionClick(0)}
          >
            <p className="accordion__number">01</p>
            <p className="accordion__name">The World's Tallest Building</p>
                     </div>

          <div
            className="accordion__details"

          >
            <ul>
              <li>
                The current tallest building in the world is the Burj Khalifa,
                located in Dubai, United Arab Emirates.
              </li>
              <li>
                It stands at a height of 828 meters (2,716 feet) tall and has
                163 floors.
              </li>
              <li>
                The building took six years to construct and was completed in
                2010.
              </li>
            </ul>
          </div>
        </div>

        <div
          className={`accordion__item ${openAccordion === 1 ? "open" : ""}`}
           // HERE
          ref={(el) => (accordionRefs.current[1] = el)}
        >
          <div
            className="accordion__header"
            onClick={() => handleAccordionClick(1)}
          >
            <p className="accordion__number">02</p>
            <p className="accordion__name">
              Famous Inventors and Their Inventions
            </p>
                      </div>
          <div
            className="accordion__details"

          >
            <ul>
              <li>
                Nikola Tesla, a Serbian-American inventor, is credited with the
                invention of the AC (alternating current) electrical system.
              </li>
              <li>
                Thomas Edison, an American inventor, is credited with the
                invention of the light bulb.
              </li>
              <li>
                Alexander Graham Bell, a Scottish-born American inventor, is
                credited with the invention of the telephone.
              </li>
            </ul>
          </div>
        </div>
        <div
          className={`accordion__item ${openAccordion === 2 ? "open" : ""}`}
          // HERE
          ref={(el) => (accordionRefs.current[2] = el)}
        >
          <div
            className="accordion__header"
            onClick={() => handleAccordionClick(2)}
          >
            <p className="accordion__number">03</p>
            <p className="accordion__name">Largest Deserts in the World</p>
                      </div>
          <div
            className="accordion__details"

          >
            <ul>
              <li>
                The Sahara Desert, located in Africa, is the largest hot desert
                in the world and covers an area of 9.2 million square kilometers
                (3.6 million square miles).
              </li>
              <li>
                The Antarctic Desert, located in Antarctica, is the largest cold
                desert in the world and covers an area of 14 million square
                kilometers (5.4 million square miles).
              </li>
              <li>
                The Arabian Desert, located in the Middle East, is the
                third-largest desert in the world and covers an area of 2.33
                million square kilometers (900,000 square miles).
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

Next, modify the handleAccordionClick function to add GSAP animations.

if (index === openAccordion) {
      gsap.to(
        accordionRefs.current[index].querySelector(".accordion__details"),
        {
          height: 0,
          duration: 1,
          ease: "power1.inOut",
         }
      );
    }

Explaining the code snippet above:

• The conditional statement first checks if the index of the accordion item clicked matches the current state of the accordion.
• Next, we use a GSAP method to add animations when the condition is true. The gsap.to method allows you to define the animation properties for an element and then smoothly transition the element from its current state to the specified end state over a period of time. The gsap.to method takes in 2 parameters, the target element and the specified behaviour of that target element.
• We used a DOM traversing attribute (.querySelector) to select the element with the class name accordion__details inside that accordion item and attached some animation and styling to it.

Note: This code block will fire each time a particular accordion item is clicked twice, (when index === openAccordion), making this a closing animation.

Next you have to account for opening animations and closing previously open accordion items.

else {
      if (openAccordion !== null) {
        gsap.to(
          accordionRefs.current[openAccordion].querySelector(
            ".accordion__details"
          ),
          {
            height: 0,
            duration: 1,
            ease: "power1.inOut",
          }
        );
      }
      setOpenAccordion(index);
      gsap.fromTo(
        accordionRefs.current[index].querySelector(".accordion__details"),
        { height: 0 },
        {
          height: "auto",
          duration: 1,
          ease: "power1.inOut",
        }
      );
    }

• The else block checks if the current value of the accordion is not null (if an accordion header has already been clicked) and uses GSAP to close the previously opened accordion by using the value stored in the openAccordion to target the appropriate element.
• Then it updates the openAccordion value to the currently clicked element’s index. Finally, it uses a gsap.fromTo method to specify the animation of opening an accordion item. The gsap.fromTo takes in a starting and ending condition and animates the accordion item accordingly (from height: 0 to height: auto).

Taking a look at the accordion now, you'll see the following result:

Final version with a bug

And with that, you’ve successfully crafted an interactive accordion component, congrats! 🎉

There’s a small bug though. If you click on an accordion item after opening and closing it, it fails to open. This is because after the accordion item closes, the value of the openAccordion is still set to that accordion item’s index. This makes the code behave like there’s still an open accordion item even after closing it.

To solve this, attach an onComplete event to the handleAccordionClick function that sets the value of openAccordion to null after the animation completes. This way, each time you close the accordion, the value of openAccordion is reset and the accordion item can be reopened.

  const handleAccordionClick = (index) => {
    if (index === openAccordion) {
      gsap.to(
        accordionRefs.current[index].querySelector(".accordion__details"),
        {
          height: 0,
          duration: 1,
          ease: "power1.inOut",
          onComplete: () => setOpenAccordion(null),
        }
      );
      console.log(openAccordion);
    } else {
      if (openAccordion !== null) {
        gsap.to(
          accordionRefs.current[openAccordion].querySelector(
            ".accordion__details"
          ),
          {
            height: 0,
            duration: 1,
            ease: "power1.inOut",
          }
        );
      }
      setOpenAccordion(index);
      gsap.fromTo(
        accordionRefs.current[index].querySelector(".accordion__details"),
        { height: 0 },
        {
          height: "auto",
          duration: 1,
          ease: "power1.inOut",
        }
      );
    }
  };

And with that, let’s take a look at the final result:

Final bug free version

For ease of accessibility, here’s the final full code:

import { useRef, useState } from "react";
import "./App.css";
import { gsap } from "gsap";
function App() {
  const [openAccordion, setOpenAccordion] = useState(null);
  const accordionRefs = useRef([]);

  const handleAccordionClick = (index) => {
    if (index === openAccordion) {
      gsap.to(
        accordionRefs.current[index].querySelector(".accordion__details"),
        {
          height: 0,
          duration: 1,
          ease: "power1.inOut",
          onComplete: () => setOpenAccordion(null),
        }
      );
      // console.log(openAccordion);
    } else {
      if (openAccordion !== null) {
        gsap.to(
          accordionRefs.current[openAccordion].querySelector(
            ".accordion__details"
          ),
          {
            height: 0,
            duration: 1,
            ease: "power1.inOut",
          }
        );
      }
      setOpenAccordion(index);
      gsap.fromTo(
        accordionRefs.current[index].querySelector(".accordion__details"),
        { height: 0 },
        {
          height: "auto",
          duration: 1,
          ease: "power1.inOut",
        }
      );
    }
  };

  return (
    <div className="App">
      <div className="accordion__container">
        <div
          className={`accordion__item  ${openAccordion === 0 ? "open" : ""}`}
          ref={(el) => (accordionRefs.current[0] = el)}
        >
          <div
            className="accordion__header"
            onClick={() => handleAccordionClick(0)}
          >
            <p className="accordion__number">01</p>
            <p className="accordion__name">The World's Tallest Building</p>
          </div>

          <div className="accordion__details">
            <ul>
              <li>
                The current tallest building in the world is the Burj Khalifa,
                located in Dubai, United Arab Emirates.
              </li>
              <li>
                It stands at a height of 828 meters (2,716 feet) tall and has
                163 floors.
              </li>
              <li>
                The building took six years to construct and was completed in
                2010.
              </li>
            </ul>
          </div>
        </div>

        <div
          className={`accordion__item ${openAccordion === 1 ? "open" : ""}`}
          ref={(el) => (accordionRefs.current[1] = el)}
        >
          <div
            className="accordion__header"
            onClick={() => handleAccordionClick(1)}
          >
            <p className="accordion__number">02</p>
            <p className="accordion__name">
              Famous Inventors and Their Inventions
            </p>
          </div>
          <div className="accordion__details">
            <ul>
              <li>
                Nikola Tesla, a Serbian-American inventor, is credited with the
                invention of the AC (alternating current) electrical system.
              </li>
              <li>
                Thomas Edison, an American inventor, is credited with the
                invention of the light bulb.
              </li>
              <li>
                Alexander Graham Bell, a Scottish-born American inventor, is
                credited with the invention of the telephone.
              </li>
            </ul>
          </div>
        </div>
        <div
          className={`accordion__item ${openAccordion === 2 ? "open" : ""}`}
          ref={(el) => (accordionRefs.current[2] = el)}
        >
          <div
            className="accordion__header"
            onClick={() => handleAccordionClick(2)}
          >
            <p className="accordion__number">03</p>
            <p className="accordion__name">Largest Deserts in the World</p>
          </div>
          <div className="accordion__details">
            <ul>
              <li>
                The Sahara Desert, located in Africa, is the largest hot desert
                in the world and covers an area of 9.2 million square kilometers
                (3.6 million square miles).
              </li>
              <li>
                The Antarctic Desert, located in Antarctica, is the largest cold
                desert in the world and covers an area of 14 million square
                kilometers (5.4 million square miles).
              </li>
              <li>
                The Arabian Desert, located in the Middle East, is the
                third-largest desert in the world and covers an area of 2.33
                million square kilometers (900,000 square miles).
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}
export default App;

Here’s a link to the repository: Github

And the live version: Live Demo

As a bonus, I prepared a JSON file in the repo containing all the information filled into the accordion component to better aid you in writing cleaner and reusable code.

JSON file

Conclusion

In this tutorial, you learned how to create an accordion component using React and GSAP that's not only functional but also looks super cool!

Now you can impress your friends and colleagues with your accordion-making skills, and who knows – maybe you'll start a new trend of accordion-themed websites :) Just remember to use your powers for good and not evil, and always accordion responsibly.

Contact Information

Want to connect or contact me? Feel free to hit me up on the following:

• Twitter: @jajadavid8
• LinkedIn: David Jaja
• Email: Jajadavidjid@gmail.com

Route animation is a frequently underestimated aspect of UX that can substantially improve a website's interactivity.

In this tutorial, I'll walk you through the steps of incorporating route animations in React applications using Framer Motion, a powerful and user-friendly animation library.

Importance of Animating Routes in Web Applications

Animating routes can make transitions between different pages or sections of a website more visually appealing and interactive. Smooth route animations enhance the overall user experience by providing a sense of continuity and fluidity. They can also minimise perceived loading times and keep users engaged while new content is fetched or rendered.

If you’re like I am, and you're a sucker for aesthetic animations, you’d agree that websites that have silky animations and transitions, especially between their parts (routes), tend to leave a stronger impression and keep you browsing longer than less animated ones.

A Brief Introduction to React and Framer Motion

React has become a widely-used JavaScript library for crafting user interfaces, especially in the context of single-page applications (SPAs). As an SPA-focused solution, React loads a single HTML page and dynamically alters the content based on user navigation within the app, through route changes.

Framer Motion, an open-source animation library designed for React, delivers a straightforward and expressive API for generating intricate animations.

The library boasts an extensive array of animation capabilities, including spring physics, gesture handling, and server-side rendering support. This makes Framer Motion an ideal choice for implementing route animations in React applications.

How to Set Up Your Development Environment

Before you can begin animating routes in a React application, you need to set up your development environment. This includes installing Node.js and npm (Node Package Manager) on your computer.

How to Create a React Project

Once you have Node.js and npm installed, you can create a new React project using the Create React App command-line tool. Run the following command in your terminal:

npx create-react-app react-framer-animation

After that, open that folder with your code editor. It should look something like this:

Setting up and opening your React App

Note: in this tutorial, I'll be using the VSCode Editor for development but any modern text editor should suffice.

Next, you rid yourself of all the boilerplate styles and unnecessary files in your app.

Clearing the clutter files

Your next setup step is to install framer motion and react-router in your React app. Simply open your code editor’s terminal and run:

npm install framer-motion react-router-dom

Installing the necessary dependencies

All that’s left is to run npm start which starts up a development server on your browser that opens a blank page.

How React Router Works

React Router is a widely-used library for managing navigation and routing in React applications. It allows developers to create dynamic routes and handle route changes seamlessly (that is, navigating between pages or components).

To help you gain a better understanding, let’s set up routes for our project.

First, import all the necessary functionalities into your App component

import { BrowserRouter, NavLink, Route, Routes } from "react-router-dom";

Then create the rest of the components which you’ll navigate through. To prevent tedious back and forths between components, all components will be created in the App.js component.

function Home() {
  return (
    <div
      className="home component"
    >
     <h1>  Home Component </h1>
    </div>
  );
}

function Header() {
  return (
    <div className="header">
      <span>Header Component</span>
      <ul>
      </ul>
    </div>
  );
}

function About() {
  return (
    <div
      className="about component"
    >
      <h1> About Component </h1>
    </div>
  );
}

function Contact() {
  return (
    <div
      className="contact component"
    >
      <h1> Contact Component </h1>
    </div>
  );
}

To render these components on the browser, you simply embed them in the App component.

function App() {
  return (
    <div classname=”App”>
      <Header />
      <Home />
      <About />
      <Contact />
    </div>
  );
}

At an initial glance, your app should look something like this in the browser:

Initial rendering of your components without any styling

To make your app look better, add these stylings:

@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@600&display=swap");

body {
  font-family: "Rajdhani", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.header {
  padding: 20px;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.header span {
  font-size: 20px;
}

.header ul {
  display: flex;
  gap: 20px;
}

.header ul a {
  text-decoration: none;
  border: 1.5px solid #555;
  padding: 5px 10px;
  color: #333;
}

.component {
  font-size: 30px;
  height: 87vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.home {
  background: rgb(214, 223, 135);
}
.about {
  background: rgb(115, 139, 243);
}

.contact {
  background: palevioletred;
}

Here's what it'll look like now:

App after applying CSS

With your components styled, you can begin setting up the routes.

First, wrap the contents of your App component with the BrowserRouter, then further wrap the contents with the Routes function. You do this to specify the components you can route (navigate) between.

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Header />
        <Routes>
          <Home />
          <About />
          <Contact />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

Keep in mind the header component is not placed inside the Routes component because it’s going to appear on the page irrespective of the route you navigate to.

Then, you assign a route path to each component.

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Header />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

At the moment, since you’re in the root route (/), only the home component is visible.

Home page after setting up the routes

In order to navigate between pages, you use the NavLink element in your header ul and specify a different route per NavLink. This would enable easy routing per NavLink you click on.

function Header() {
  return (
    <div className="header">
      <span>Header Component</span>
      <ul>
        <NavLink to="/">Home</NavLink>
        <NavLink to="/about">About</NavLink>
        <NavLink to="/contact">Contact</NavLink>
      </ul>
    </div>
  );
}

With that, you’ve successfully set up route buttons for your components!

After setting up routing buttons

How to Set Up Your Routes for Animation

Now, to my favourite part of this article – animating the routes. To animate routes in React with framer motion, you first import 2 properties.

import { motion, AnimatePresence } from "framer-motion";

The motion property turns whatever element you prefix it to into a motion element that can be animated with Framer, and the AnimatePresence component enables smooth animations when adding, removing, or changing components from a React component tree (visual representation or hierarchy of all the components used in a React application).

To animate the routes, you start by wrapping the content of the BrowserRouter with the AnimatePresence component.

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <AnimatePresence>
          <Header />
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<Contact />} />
          </Routes>
        </AnimatePresence>
      </BrowserRouter>
    </div>
  );
}

On its own, the AnimatePresence component can’t tell when a component has mounted or unmounted so you’ll need to listen for that change.

To do this, you use the useLocation hook which listens for when there’s a change in the URL of your app (that is, when the route has changed). But you’re plighted with an error when you import and invoke the useLocation hook in your App component.

import { useLocation } from "react-router-dom"

 const location = useLocation();

Error using useLocation

This error is caused because the useLocation hook can only be used within a Router component (a component that’s not a descendant of a Router component), which provides the routing context for the hook.

To solve this, you need to do a little refactoring. First, you create a LocationProvider component. This component is a wrapper component that returns the AnimationPresence.

function LocationProvider() {  return <AnimatePresence></AnimatePresence>; }

You then pass in the children prop to the LocationProvider which the AnimatePresence component uses to wrap any child element that would have a routing animation when mounted or unmounted.

function LocationProvider({ children }) {
  return <AnimatePresence>{children}</AnimatePresence>;
}

Then you create a RoutesWithAnimation component where you specify each route and the element to be mounted in that route. In this component, you can now use the useLocation hook to check for when there’s a route change.

function RoutesWithAnimation() {
  const location = useLocation();

  return (
    <Routes location={location} key={location.key}>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </Routes>
  );
}

Note: A key prop was passed in the Routes component which React uses to render the correct component when the location changes.

Finally, you clear the App component of all the routing logic you defined earlier and replace it with the RoutesWithAnimation nested in the LocationProvider.

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Header />
        <LocationProvider>
          <RoutesWithAnimation />
        </LocationProvider>
      </BrowserRouter>
    </div>
  );
}

To confirm that you’re keeping track of the route changes, log the location value to the console and toggle between routes.

As you can see, each time you change the route, the route path is logged to the console, along with a unique key property.

How to Animate Routes with Framer

To animate anything in Framer, you need to specify the following.

• Variants: Variants are a way to define and animate the properties of a component. A variant is an object that contains one or more named sets of properties, where each set represents a different animation state. To create a variant for your routes, you first define a variant object:

const routeVariants = {}

• Initial animation state: In your variant, you specify the initial state of the animation by creating an initial animation object. For this project, the animation you’re creating involves each component sliding in from the bottom (y-axis) of the page. To do this, you initially translate the entire component out of the viewport:

const routeVariants = {
    initial: {
        y: '100vh'
    }
}

• Final animation state: Next, you specify the animation when the component is mounted by specifying a final animation state:

const routeVariants = {
    initial: {
        y: '100vh'
    }
    final: {
        y: '0vh'
    }
}

In order to apply these new animation properties to your components, you first make each component a motion element by prefixing the motion keyword to it.

function Home() {
  return <motion.div className="home component">  <h1> Home Component </h1></motion.div>;
}

function About() {
  return <motion.div className="about component"> <h1> About Component </h1></motion.div>;
}

function Contact() {
  return <motion.div className="contact component"> <h1> Contact Component </h1></motion.div>;
}

Then, you pass in the variants object and each of the variants states to each component you wish to animate. The initial state is the unmounted state of the component and the animate state is the mounted state of the component.

function Home() {
  return (
    <motion.div
      variants={routeVariants}
      initial="initial"
      animate="final"
      className="home component"
    >
    <h1> Home Component </h1>
    </motion.div>
  );
}

function About() {
  return (
    <motion.div
      variants={routeVariants}
      initial="initial"
      animate="final"
      className="about component"
    >
     <h1>  About Component </h1>
    </motion.div>
  );
}

function Contact() {
  return (
    <motion.div
      variants={routeVariants}
      initial="initial"
      animate="final"
      className="contact component"
    >
    <h1> Contact Component </h1>
    </motion.div>
  );
}

With this, your animation should already be working.

Initial routing animation with extra bouncy effect achieved

And voilà! You’ve successfully animated the routes in your React app. Kudos! 🚀

One thing you’d notice is how bouncy our transition is. It slightly spills into the header component when entering the page. This is because the default animation type in Framer is spring which behaves as such.

To reduce the effect, you can simply specify a mass property on the final animation state.

final: {
    y: "0vh",
    transition: {
      type: "spring",
      mass: 0.4,
    },
  },

This property specifies the mass of the animated component. An increase in value of the mass of the animated component results in a more bouncy effect and vice versa.

Note: The mass value is usually kept between 0 and 1. (0 being no springiness and 1 being a lot of springiness). Setting your animated mass to 0.4 yields the following:

Extra routing bouncy effect solved

Children Animations

We can take this even further by animating the route separately from the content of that route.

Start by creating a child variants object for the headings in each component.

const childVariants = {
  initial: {
    opacity: 0,
    y: "50px",
  },
  final: {
    opacity: 1,
    y: "0px",
    transition: {
      duration: 0.5,
      delay: 0.5,
    },
  },
};

The childVariant animates the children elements by moving them up 50px and making them visible by increasing the opacity. Finally, the delay makes that animation fire slightly after the parent component animation fires.

To make this animation effective, you make each h1 a motion element. After that, you define your variants and animation states in all the child elements you want to animate. Each h1 element should look something like this:

 <motion.h1 variants={childVariants} initial="initial" animate="final">
        // Whatever component name was in here.
</motion.h1>

Final result with both routing and children animation achieved

And with that, you’ve implemented a pretty sleek routing animation with Framer, congratulations! 🎉

For reference, here’s the full code:

import {
  BrowserRouter,
  NavLink,
  Route,
  Routes,
  useLocation,
} from "react-router-dom";

import { motion, AnimatePresence } from "framer-motion";

const routeVariants = {
  initial: {
    y: "100vh",
  },
  final: {
    y: "0vh",
    transition: {
      type: "spring",
      mass: 0.4,
    },
  },
};

const childVariants = {
  initial: {
    opacity: 0,
    y: "50px",
  },
  final: {
    opacity: 1,
    y: "0px",
    transition: {
      duration: 0.5,
      delay: 0.5,
    },
  },
};

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Header />
        <LocationProvider>
          <RoutesWithAnimation />
        </LocationProvider>
      </BrowserRouter>
    </div>
  );
}

function LocationProvider({ children }) {
  return <AnimatePresence>{children}</AnimatePresence>;
}

function RoutesWithAnimation() {
  const location = useLocation();
  console.log(location);

  return (
    <Routes location={location} key={location.key}>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </Routes>
  );
}

function Header() {
  return (
    <div className="header">
      <span>Header Component</span>
      <ul>
        <NavLink to="/">Home</NavLink>
        <NavLink to="/about">About</NavLink>
        <NavLink to="/contact">Contact</NavLink>
      </ul>
    </div>
  );
}

function Home() {
  return (
    <motion.div
      variants={routeVariants}
      initial="initial"
      animate="final"
      className="home component"
    >
      <motion.h1 variants={childVariants} initial="initial" animate="final">
        Home Component
      </motion.h1>
    </motion.div>
  );
}

function About() {
  return (
    <motion.div
      variants={routeVariants}
      initial="initial"
      animate="final"

      className="about component"
    >
      <motion.h1 variants={childVariants} initial="initial" animate="final">
        About Component
      </motion.h1>
    </motion.div>
  );
}

function Contact() {
  return (
    <motion.div
      variants={routeVariants}
      initial="initial"
      animate="final"

      className="contact component"
    >
      <motion.h1 variants={childVariants} initial="initial" animate="final">
        Contact Component
      </motion.h1>
    </motion.div>
  );
}
export default App;

Here’s a link to the repository: GitHub

And the live version: Netlify

Final Thoughts

I’ve got to say, I had lots of fun writing this article and building this animation, and I hope you did too. (I also refreshed one too many times because I liked the animation effect 😉).

I was really motivated to put this article out there because when I learnt Framer motion a few weeks ago, I struggled to find up-to-date resources to teach me how to use it, especially ones that implemented it with the latest version of both tools (react-router v6 and Framer motion 10). So I hope this article provides a reference to a much more recent approach to routing animations with Framer.

Resources

To learn more about framer motion and the react-router, here are a couple of resources I’d recommend

• Framer Motion (For React)
• Framer motion Docs
• React Router In-depth
• React Router V6

Conclusion

In conclusion, animating routes in a React application using Framer Motion can enhance the user experience by creating smooth and seamless transitions between different pages.

By incorporating components like AnimatePresence, motion, and variants, you can customize your app's animations, making it more engaging and visually appealing.

Implementing animations can improve the overall flow and navigation of your app, creating a more enjoyable and responsive experience for your users.

Contact Information

Want to connect or contact me? Feel free to hit me up on the following:

• Twitter: @jajadavid8
• LinkedIn: David Jaja
• Email: Jajadavidjid@gmail.com

Sometimes, when you visit a website, you'll notice that certain elements or a particular section gets revealed dynamically as you scroll.

It's like the contents of that particular section weren't available to view until you scrolled into the section – but now, because you're there, the website decides to reveal these contents.

Sometimes this might happen in a matter of milliseconds, and other times it might load lazily. All these phenomena are made possible by JavaScript's Intersection Observer API.

What is the Intersection Observer API?

The Intersection Observer API is a browser API which watches for changes that intersect with the viewport and then executes a callback function in the code.

It works by allowing you to define an observer function that runs when the target element intersects another element or the browser's default viewport.

The intersection observer API lets code register a call back function that is executed whenever an element they wish to monitor enters or exits another element or the amount by which the two intersect changes by a requested amount. - MDN web docs.

Pre-requisites:

• Basic knowledge of HTML, CSS and JavaScript. You've probably built a simple project with them before.
• An IDE, preferably VS Code.
• A browser, like Chrome.

In this article, you'll learn how to build a simple web page with HTML, CSS and JavaScript. Then you'll use the Intersection Observer API to implement a simple scroll animation.

How the Intersection Observer API Works

So you might be wondering, what happens when you define an observer call-back function? What happens is that you pass in an entries parameter as an argument which then executes intersection command once the user scrolls to the target element.

For example:

Const observer = new IntersectionObserver(entries => {
    // your set of conditions goes here
})

Once you have defined your observer function, you are thus able to set out the conditions you wish to be met once the intersection happens.

To make such changes, there are different options that the API allows you to pass into your call-back function. These options are the second parameters you can pass in as arguments. They are:

Threshold

The threshold option ranges from 0-1, and you can specify the threshold to mean the required percentage of the target element that should be on sight for isIntersecting to be true. Remember that the default is 0, so that when the target element is just slightly visible your call-back function implements as needed.

Root Margin

The root margin is quite important in that you can add it to the container viewport and thus define each side of the viewport. It also allows you to define your own nested area for the API. The same way you define margins in custom CSS is just how you do it for root margin in Intersection Observer API.

Root

When defining the root, keep in mind that it must be an ancestor of the target element. Depending on what you're working on you might or might not have to define the root, as it always defaults to the browser's viewport when not defined.

Now that you are acquainted with the basics of how the Intersection Observer API works, it's time to see it in action.

How to Build a Page with HTML and CSS

Here, you'll build a basic static page with HTML and CSS. This page works just fine as it is, but there are no scroll animations at the moment.

We'll use this page to demonstrate the changes that happen once we add the Intersection Observer API JS part.

You are also going to add an animation class which will be called in JS using the DOM.

Don't forget to link your style file to your JS file as well.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="app.js" defer></script>
    <title>Intersection observer</title>
</head>
<body>

    <section>
        <h1>
            Here we go!
        </h1>

    </section>
    <section> 
        <h2 class="animation">What I do</h2>
        <p class="animation">Welcome to my page, My name is Mwendwa Bundi. I am a front-end developer and technical writer. Tell me about you!
        </p>

        </section>
        <section>
        <h1 class="animation">
            Here we go. Again!
        </h1>

    </section>

</body>
</html>

CSS

Now we'll add some styling to the page and also a center section defined in the HTML. This will help in showing the scroll animations as they ease in.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body {
    background-color: aqua;
    color: white;
}

section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

This is how the page looks as of now:

Basic webpage with HTML & CSS

How to Update the CSS

Before adding the JavaScript, you have to update your custom CSS with the required animation you wish to see. As it is right now, our basic page is static. Here's the code to add to your CSS:

.animation {
    opacity: 0;
    transform: translateX(-300px);
    transition: all 0.7s ease-out;
    transition-delay: 0.4s;

}

.scroll-animation {
    opacity: 1;
    transform: translateX(0);
}

The opacity before the scroll is set to 0 so that once the user scrolls into the target element, the items can appear. This is why the opacity changes to 1 as shown above.

How to Add the JavaScript Functionality

The idea is that once the p tag with the class animation is in view, the call-back function will successfully run.

Go ahead and use the DOM to select the animation class from the HTML page.

const the_animation = document.querySelectorAll('.animation')

Now, it's time to create an observer function:

const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            entry.target.classList.add('scroll-animations')
        }
            else {
                entry.target.classList.remove('scroll-animation')
            }

    })
},

Here, you have used the if/else conditional statements to specify what should happen if isIntersecting is true and afterward.

For each entry, if the entry parameter is intersecting, you use the DOM to select the animations property that you defined in your custom CSS – else, it's removed. This means that no matter how many times the user scrolls back and forth, the animation will still occur. In other words, the call-back function will still run.

To make sure that the callback function does not run immediately when the target element is in view, define a threshold of 0.5 inside the function.

{ threshold: 0.5
   });

To get your observer in motion, define a for loop. This for loop will iterate through all the classes termed animation and observe the conditions in your intersection observer API.

  for (let i = 0; i < the_animation.length; i++) {
   const elements = the_animation[i];

    observer.observe(elements);
  }

This is how the page looks now:

Complete JavaScript Code

const the_animation = document.querySelectorAll('.animation')

const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            entry.target.classList.add('scroll-animation')
        }
            else {
                entry.target.classList.remove('scroll-animation')
            }

    })
},
   { threshold: 0.5
   });
//
  for (let i = 0; i < the_animation.length; i++) {
   const elements = the_animation[i];

    observer.observe(elements);
  }

Conclusion

In this article, you have learnt about one of JavaScript's observer-based APIs, the Intersection Observer API. You have also successfully built a simple webpage to showcase scroll animations with the API.

In this article, you’ll learn how to implement the reveal on scroll effect in React using Intersection Observer. This will allow you to create stunning, dynamic user experiences that keep visitors engaged and coming back for more.

This step-by-step guide will help you understand this technique in no time, taking your React development skills to the next level.

Prerequisites

• Fundamentals of HTML and CSS
• Fundamentals of JavaScript and JavaScript’s Intersection Observer API
• Fundamental knowledge of React
• A code editor, a browser (preferably one that supports Java Script's Intersection API, like Google Chrome) and Node.js

What is the Intersection Observer API?

Intersection Observer is a web-based API that enables developers to detect when a specific element intersects with another element or the viewport.

You can use this API to monitor any changes in the visibility of an element as it intersects with another element, or exits / enters the viewport.

How the Intersection Observer API Works

Intersection Observer first watches for an intersection (either between two elements or an element and the browser’s viewport). When it detects an intersection, the observer function fires a callback function that tells the code what to do next.

How to Implement the Intersection Observer API in React

This section consists of three parts:

1. Setting up your React environment
2. Adding boilerplates and styles
3. Implementing the review on scroll functionality

How to set up your React environment:

First, you'll need to set up a React environment by running npx create-react-app [your project name], either on your native terminal or an IDE’s terminal.

Command to create your React app

If you chose to use a native terminal, your next step will be opening that file with your preferred IDE. It should look something like this:

Opening the file in your IDE

How to add boilerplate and styles

Next, clear all the default stylings and rid yourself of all the unnecessary files and imports for this project. This leaves your folder structure looking like this:

React app folder structure

For the App component, you'll create three child elements (header, main and footer). This is necessary because it gives you a better understanding of the reveal-on-scroll effect as you scroll in from the header and scroll out through the footer.

Import ‘./App.css’
function App()
{  return 
(    <div className="App">  
        <header>This is the Header</header>
        <main>
            <div className="child-one">Child One</div>
            <div className="child-two">Child Two</div>
        </main>      
        <footer>This is the Footer</footer>
      </div>  );
}

export default App;

Then apply these styles in the App.css file to organise your app's layout.

@import url("https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Foundation:wght@500&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.App {
  width: 100%;
  height: 100%;
  background: #fff;
  font-family: "Edu NSW ACT Foundation", cursive;
}

body {
  font-size: 50px;
}

header,
footer {
  box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.3);
  height: 100vh;
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

footer {
  margin-top: 50px;
  box-shadow: -3px -5px 5px rgba(0, 0, 0, 0.3);
}

main {
  box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.3), -3px -5px 5px rgba(0, 0, 0, 0.3);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  gap: 50px;
  overflow: hidden;
}

main div {
  flex: 1;
  height: 80%;
  border: 2px solid #999;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  Transition: all ease-in 1s;
}

.slide-in {
  transform: translateX(0) !important;
}

Your project should look like this currently:

Layout after applying styles

How to implement the review on scroll functionality

First, you need to create a state that holds the current intersecting value – that is, if the monitored element is intersecting something or not.

import { useState} from "react";
export default function test() {
  const [isIntersecting, setIsIntersecting] = useState(false);

The initial value of the state is set to false, and changes to true when an intersection occurs.

Next, you create a reference using the useRef hook, which you will then attach to the element you want to reference. This hook is used to store a reference to a DOM element (similar to what you would get with document.querySelector), allowing you to access and manipulate the element directly when needed.

import { useState, useRef } from "react";
function App() {
  const [isIntersecting, setIsIntersecting] = useState(false);

  const ref = useRef(null);

  return (
    <div className="App">
      <header>This is the Header</header>
      <main ref={ref}>
        <div className="child-one">Child One</div>
        <div className="child-two">Child Two</div>
      </main>
      <footer>This is the Footer</footer>
    </div>
  );
}

export default App;

Next, you use a useEffect hook to create an intersection observer instance that watches for intersections.

import { useState, useRef, useEffect} from "react"; 

useEffect(() => {
    const observer = new IntersectionObserver();
  }, []);

After that, you'll pass in a callback function that updates the intersecting state.

 useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsIntersecting(entry.isIntersecting);
      }
    );
  }, []);

Keep in mind that we deconstructed the entries array to get the first value, that is the first intersection.

Next, you provide an options object as the second argument to the IntersectionObserver function.

The options object can have several properties, including the rootMargin property. The rootMargin value defines the margins around the observed element, effectively expanding or contracting its bounding box. The observer function triggers when the adjusted bounding box enters or exits the intersection with the specified root element.

useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsIntersecting(entry.isIntersecting);
      },
      { rootMargin: "-300px" }
    );
  }, []);

Note: It is important to note that if you specify a negative value for rootMargin, the observer function will fire when the observed element is already partially visible. For example, a value of -300px means that the observer function will trigger when 300 pixels of the observed element have come into view.

Your next step is to call the observe method on the observer to indicate the current element you’re observing.