Convert Figma logo to code with AI

useAnimations logoreact-useanimations

React-useanimations is a collection of free animated open source icons for React.js.

1,090
46
1,090
11
View on GitHubView on NPM

Top Related Projects

framer's avatar

motion

23,338

Open source, production-ready animation and gesture library for React

airbnb's avatar

lottie-web

30,473

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/

juliangarnier's avatar

anime

49,575

JavaScript animation engine

greensock's avatar

GSAP

19,483

GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web

michalsnik's avatar

aos

26,486

Animate on scroll library

animate-css's avatar

animate.css

80,550

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

Quick Overview

useAnimations/react-useanimations is a React library that provides a collection of animated icons as React components. It offers a simple way to add engaging, interactive animations to web applications using SVG and CSS animations, without the need for heavy JavaScript libraries.

Pros

  • Easy to use with a simple API for React applications
  • Large collection of pre-made, customizable animated icons
  • Lightweight and performant, using SVG and CSS for animations
  • Supports TypeScript for improved developer experience

Cons

  • Limited to predefined animations, may not suit all custom needs
  • Requires React, not suitable for non-React projects
  • Some animations may be too complex for certain use cases
  • Documentation could be more comprehensive for advanced usage

Code Examples

  1. Basic usage of an animated icon:
import React from 'react';
import UseAnimations from 'react-useanimations';
import menu2 from 'react-useanimations/lib/menu2';

function App() {
  return (
    <UseAnimations animation={menu2} size={56} />
  );
}
  1. Using an animated icon with custom color:
import React from 'react';
import UseAnimations from 'react-useanimations';
import github from 'react-useanimations/lib/github';

function App() {
  return (
    <UseAnimations
      animation={github}
      size={56}
      strokeColor="#000000"
    />
  );
}
  1. Creating a clickable animated icon:
import React, { useState } from 'react';
import UseAnimations from 'react-useanimations';
import heart from 'react-useanimations/lib/heart';

function App() {
  const [isLiked, setIsLiked] = useState(false);

  return (
    <UseAnimations
      animation={heart}
      size={56}
      onClick={() => setIsLiked(!isLiked)}
      reverse={isLiked}
    />
  );
}

Getting Started

To use react-useanimations in your React project:

  1. Install the package:

    npm install react-useanimations

  2. Import and use the desired animation in your component:

    import React from 'react';
import UseAnimations from 'react-useanimations';
import loading from 'react-useanimations/lib/loading';

function MyComponent() {
  return <UseAnimations animation={loading} />;
}

export default MyComponent;

  3. Customize the animation as needed using props like size, strokeColor, fillColor, reverse, and onClick.

Competitor Comparisons

framer logo

motion

23,338

Open source, production-ready animation and gesture library for React

Pros of motion

  • More comprehensive animation library with a wider range of features
  • Better performance for complex animations due to GPU acceleration
  • Extensive documentation and community support

Cons of motion

  • Steeper learning curve for beginners
  • Larger bundle size, which may impact load times for smaller projects

Code Comparison

react-useAnimations:

import UseAnimations from 'react-useanimations';
import menu2 from 'react-useanimations/lib/menu2'

<UseAnimations animation={menu2} size={56} />

motion:

import { motion } from "framer-motion"

<motion.div
  animate={{ rotate: 360 }}
  transition={{ duration: 2 }}
/>

Summary

react-useAnimations is a lightweight library focused on pre-built, customizable animations, making it ideal for quick implementation of common UI animations. It's easy to use but limited in scope.

motion, on the other hand, is a more powerful and flexible animation library. It offers a wide range of animation capabilities, including gestures, drag, and complex orchestration. While it requires more setup and learning, it provides greater control and possibilities for advanced animations.

Choose react-useAnimations for simple, pre-built animations in smaller projects, and motion for more complex, custom animations in larger applications where performance and flexibility are crucial.

airbnb logo

lottie-web

30,473

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/

Pros of lottie-web

  • Broader platform support, including Android, iOS, and web
  • More mature and widely adopted in the industry
  • Extensive documentation and community support

Cons of lottie-web

  • Larger file size and potentially higher performance overhead
  • Steeper learning curve for complex animations
  • Requires external tools for creating animations (e.g., Adobe After Effects)

Code Comparison

react-useanimations:

import UseAnimations from 'react-useanimations';
import menu2 from 'react-useanimations/lib/menu2';

function App() {
  return <UseAnimations animation={menu2} />;
}

lottie-web:

import lottie from 'lottie-web';

lottie.loadAnimation({
  container: document.getElementById('lottie-container'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json'
});

react-useanimations offers a more straightforward implementation for React applications, with pre-built animations available as components. lottie-web provides more flexibility and control over animations but requires more setup and configuration. The choice between the two depends on the specific project requirements, target platforms, and desired level of customization.

juliangarnier logo

anime

49,575

JavaScript animation engine

Pros of anime

  • More versatile, supporting various animation types beyond SVG icons
  • Offers greater control over animation timing, easing, and properties
  • Can be used with vanilla JavaScript, not limited to React

Cons of anime

  • Steeper learning curve due to more complex API
  • Requires manual setup for each animation, unlike pre-built icons in react-useanimations
  • Larger file size, which may impact performance for simpler projects

Code Comparison

react-useanimations:

import UseAnimations from 'react-useanimations';
import menu2 from 'react-useanimations/lib/menu2';

function App() {
  return <UseAnimations animation={menu2} />;
}

anime:

import anime from 'animejs/lib/anime.es.js';

anime({
  targets: '.element',
  translateX: 250,
  rotate: '1turn',
  duration: 800,
  easing: 'easeInOutQuad'
});

Summary

react-useanimations is ideal for quickly implementing pre-built animated SVG icons in React projects, offering simplicity and ease of use. anime, on the other hand, provides a more powerful and flexible animation library for creating custom animations across various elements and properties. The choice between the two depends on the specific project requirements, complexity of desired animations, and development preferences.

greensock logo

GSAP

19,483

GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web

Pros of GSAP

  • More powerful and flexible animation capabilities
  • Extensive documentation and community support
  • Cross-browser compatibility and performance optimization

Cons of GSAP

  • Steeper learning curve for beginners
  • Larger file size and potential impact on page load times
  • Requires a license for commercial use in some cases

Code Comparison

GSAP:

import { gsap } from "gsap";

gsap.to(".box", { duration: 1, x: 100, y: 50, rotation: 360 });

react-useAnimations:

import UseAnimations from "react-useanimations";
import menu2 from "react-useanimations/lib/menu2";

<UseAnimations animation={menu2} size={56} />;

Key Differences

  • GSAP offers more control over complex animations, while react-useAnimations provides pre-built, easy-to-use animations
  • GSAP is framework-agnostic, whereas react-useAnimations is specifically designed for React
  • GSAP requires more manual setup and coding, while react-useAnimations focuses on simplicity and quick implementation

Use Cases

  • GSAP: Ideal for complex, custom animations and interactive web experiences
  • react-useAnimations: Perfect for quickly adding simple, pre-designed animations to React applications
michalsnik logo

aos

26,486

Animate on scroll library

Pros of AOS

  • Framework-agnostic, works with any JavaScript project
  • Simpler setup and usage, requiring less code to implement
  • Offers a wider range of animation options out of the box

Cons of AOS

  • Less customizable than React-useAnimations
  • Not specifically optimized for React applications
  • May have a slightly larger performance impact on complex pages

Code Comparison

AOS:

<div data-aos="fade-up" data-aos-duration="1000">
  Animate me!
</div>

React-useAnimations:

import UseAnimations from 'react-useanimations';
import loading from 'react-useanimations/lib/loading';

<UseAnimations animation={loading} size={56} />

AOS focuses on adding animations to HTML elements using data attributes, making it easy to implement across various frameworks. React-useAnimations, on the other hand, provides pre-built animated icons as React components, offering more specific functionality for React applications.

While AOS offers a broader range of animation options and simpler implementation, React-useAnimations provides more customizable and React-specific animated components. The choice between the two depends on the project requirements, with AOS being more versatile across different frameworks and React-useAnimations offering deeper integration with React applications.

animate-css logo

animate.css

80,550

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

Pros of animate.css

  • Lightweight and easy to use with any web project, not limited to React
  • Extensive library of pre-built CSS animations
  • No JavaScript required, purely CSS-based

Cons of animate.css

  • Less control over animation timing and sequencing
  • Not optimized for React applications
  • Requires manual class manipulation for dynamic animations

Code Comparison

animate.css:

<h1 class="animate__animated animate__bounce">An animated element</h1>

react-useanimations:

import UseAnimations from "react-useanimations";
import menu2 from "react-useanimations/lib/menu2";

<UseAnimations animation={menu2} size={56} />

Key Differences

  • react-useanimations is specifically designed for React applications, while animate.css is framework-agnostic
  • animate.css provides a wide range of general-purpose animations, whereas react-useanimations focuses on micro-interactions and UI element animations
  • react-useanimations offers more programmatic control over animations, making it easier to integrate with React state and props
  • animate.css has a larger community and longer history, potentially offering more resources and support

Use Cases

  • Choose animate.css for simple, quick animations in any web project
  • Opt for react-useanimations when building React applications with complex, interactive UI elements

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

React UseAnimations Icons

npm version npm downloads

What is react-useanimations?

React-useanimations is a collection of free animated open source icons for React.js.

Collection

https://react.useanimations.com and play with examples or visit our Storybook

Installation

Using Yarn:

yarn add react-useanimations

or using NPM:

npm install -S react-useanimations

Usage

If you still need to use v1, please refer to this README instead - react-useanimations@v1

Basic usage

import React from 'react';
import UseAnimations from 'react-useanimations';
// EVERY ANIMATION NEEDS TO BE IMPORTED FIRST -> YOUR BUNDLE WILL INCLUDE ONLY WHAT IT NEEDS
import github from 'react-useanimations/lib/github'

const App = () => <UseAnimations animation={github} />;

export default App;

Icons can be configured with inline props:

<UseAnimations animation={github} size={56} wrapperStyle={{ padding: 100 }} />

These props are available:

PropDefaultDefinition
animation/animation file
size24animation size
strokeColor'inherit'animation stroke color
fillColor''animation fill color
wrapperStyle{}wrapper div styles
pathCss''css string for the animation path element
reversefalseassing to true when eg. checkbox should be checked initally
autoplayfalse*false except in animations like loading etc.
loopfalse*false except in animations like loading etc.
options{}provide any other custom options which will override the default ones
speed1a number to determine the speed of lottie(1 is normal speed)

Controlled checkbox example 
export const RadioButton = () => {
  // JUST EXAMPLE - THIS PART OF THE STATE WILL PROBABLY COME FROM A PARENT FORM COMPONENT
  const [checked, setChecked] = useState(true);

  return (
    <div style={{ padding: '20px' }}>
      <span>radioButton</span>
      <UseAnimation
        reverse={checked}
        onClick={() => {
          setChecked(!checked);
        }}
        size={40}
        wrapperStyle={{ marginTop: '5px' }}
        animation={radioButton}
      />
    </div>
  );
};

Animation wrapped in element (use render prop).

export const WrapperElement = () => {
  return (
    <UseAnimation
      animation={heart}
      size={60}
      onClick={() => {
        // eslint-disable-next-line
        console.log('additional onClick cb is working');
      }}
      render={(eventProps, animationProps) => (
        <button style={{ padding: '20px' }} type="button" {...eventProps}>
          <div {...animationProps} />
        </button>
      )}
    />
  );
};

Note that eventProps consists of onClick, mouseOver and other DOM events which you probably want to assign to your wrapping element (e.g. Button) and animationProps consist of an actual animation which you should spread inside a simple <div>

NPM DownloadsLast 30 Days