Die 15 besten Animation-Bibliotheken für React & Modern JavaScript-Apps

Tutorials

Besuchen Sie den ursprünglichen Beitrag devaradise.com/javascript-react-animation-l.. für bessere Navigation mit Inhaltsverzeichnis.

Animationen können Ihre Webanwendungen von gut zu großartig machen, indem sie interaktiver und ansprechender werden. Sie bieten visuelle Rückmeldungen, leiten die Benutzer durch das Interface und verleihen Ihren Projekten einen persönlichen Touch.

Es gibt eine Menge Animationslibrairie von einfachen, auf CSS basierenden Bibliotheken bis zu leistungsstarken JavaScript-Bibliotheken, die komplizierte Animationen erzeugen können. In diesem Artikel gehen wir einander die 15 besten Animationslibrairie für React und moderne Webanwendungen näher.

Von den bekannten React Spring und Framer Motion bis zu spezialisierten Bibliotheken wie Vivus und Three.js, finden Sie hier was Sie brauchen, um Ihre Webprojekte zu verblüffen. Lassen Sie uns diese Bibliotheken exploren und sehen, wie sie die Benutzererfahrung Ihrer Webseite verändern können!

Animate.css ist eine populäre CSS-Bibliothek, die eine Vielzahl von vordefinierten Animationen bereitstellt, was die Anwendung von Animationen in jedem Webprojekt einfach macht. Mit über 80.2k Sternen auf GitHub und Millionen von npm-Downloads ist Animate.css eine mustergültige Wahl für schnelle und einfache Animationen.

npm install animate.css

import 'animate.css';

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

Animate.css ist am besten geeignet für einfache Animationen, die schnell ohne die Notwendigkeit von JavaScript implementiert werden müssen.

Leicht zu verwenden, leicht, vielseitiges Sortiment an Animationen.

Beschränkt auf CSS-Animationen, weniger Kontrolle über das Verhalten der Animationen.

React Spring ist eine populäre Animationbibliothek für React, die auf der Basis der springenden Physik kraftvoll und flexibel Animationen erzeugt. Es hat über 27.8k Sterne auf GitHub und wird in der Community breit verwendet.

npm install @react-spring/web

import React from 'react';
import { useSpring, animated } from '@react-spring/web';

const App = () => {
    const springs = useSpring({
        from: { x: 0 },
        to: { x: 100 }
    });

    return (
        <animated.div
            style={{
                width: 80,
                height: 80,
                background: '#ff6d6d',
                borderRadius: 8
            }}
        />
    );
};

export default App;

Erstellung komplizierter Animationen mit feiner abgestimmter Kontrolle über Übergänge und Interaktionen.

Hochgradig flexibel, unterstützt fortschrittliche Animationen, gute Community-Unterstützung.

Der Lerneinsatz kann für Anfänger steil sein.

Framer Motion ist eine leistungsstarke Animationbibliothek, die bekannt ist für ihre einfache Nutzung und umfassende Features. Sie hat über 22.8k Sterne auf GitHub und wird vielfach für ihre intuitive API gelobt.

npm install framer-motion

import React from 'react';
import { motion } from 'framer-motion';

const App = () => {
    return (
        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1 }}>
            Hello, Framer Motion!
        </motion.div>
    );
};

export default App;

Erstellen von flüssigen und visuell ansprechenden Animationen mit minimalem Code.

Intuitives API, Unterstützung für Keyframe-Animationen, großartige Dokumentation.

Leicht größere Paketsize im Vergleich zu anderen Bibliotheken.

Anime.js ist eine leichte JavaScript-Animationsbibliothek mit einer leistungsstarken API. Sie hat über 49.2k Sterne auf GitHub und wird vielfach zur Erstellung komplexer und hoch aufzuladender Animationen verwendet.

npm install animejs

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

anime({
    targets: 'div',
    translateX: 250,
    rotate: '1turn',
    duration: 800
});

Erstellen von detaillierten und komplizierten Animationen mit präzisen Kontrollmöglichkeiten.

Leicht, vielseitig, hoch anpassbar.

JavaScript-Knowledge erforderlich, kann für einfache Animationen kompliziert sein.

GSAP ist eine leistungsstarke JavaScript-Animationsbibliothek, die für ihre hohe Leistung und ihr umfassendes Feature-Sortiment bekannt ist. Sie hat über 19.2k Sterne auf GitHub und findet breite Anwendung in sowohl Web- als auch Mobile-Anwendungen.

npm install gsap

import { gsap } from 'gsap';

gsap.to('.box', { rotation: 27, x: 100, duration: 1 });

Hohe-Leistungs-Animationen und komplexe Sequenzen.

Extrem leistungsstark, robust, hohe Leistung.

Größere Paketsize, erfordert Lernzeit.

Popmotion ist eine funktionale, flexibelle JavaScript-Animationsbibliothek. Es leistet die Animationen in Framer Motion. Sie hat über 19.9k Sterne auf GitHub und bietet eine Reihe von Werkzeugen für die Erstellung von Animationen und Interaktionen.

npm install popmotion

import { animate } from 'popmotion';

animate({
    from: 0,
    to: 100,
    onUpdate: (latest) => {
        console.log(latest);
    }
});

Erstellung von niedrigen-Ebenen, komplexen Interaktionen und hochgradig anpassbarer Animationen.

Funktionale API, flexibel, skalierbar und kleines Paket.

Kann für einfache Anwendungsfälle kompliziert sein.

Mo.js ist ein Werkzeugsatz für Bewegungsgrafik auf dem Web. Er hat auf GitHub über 18.3k Sterne und bietet eine Reihe von Werkzeugen für die Erstellung von Animationen an.

npm install @mojs/core

import { Mojs } from '@mojs/core';

const bouncyCircle = new mojs.Shape({
    parent: '#bouncyCircle',
    shape: 'circle',
    fill: { '#F64040': '#FC46AD' },
    radius: { 20: 80 },
    duration: 2000,
    isYoyo: true,
    isShowStart: true,
    easing: 'elastic.inout',
    repeat: 1
});

bouncyCircle.play();

Die Erstellung komplanter Bewegungsgrafik und Animationen.

Vielseitig, kraftvoll, ideal für Bewegungsgrafik.

Höhere Lernkurve, größerer Paketgröße.

Remotion ermöglicht die programmatische Erstellung von Videos mit React. Es ist eine einzigartige Bibliothek mit über 19.6k Sternen auf GitHub, die Entwicklern ermöglicht, die Leistung von React für die Erstellung von Videoinhalten zu nutzen.

# new project
npx create-video@latest

# install to existing project
npm i --save-exact [email protected] @remotion/[email protected]

export const MyComposition = () => {
    return null;
};

import React from 'react';
import {Composition} from 'remotion';
import {MyComposition} from './Composition';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="Empty"
        component={MyComposition}
        durationInFrames={60}
        fps={30}
        width={1280}
        height={720}
      />
    </>
  );
};

import { registerRoot } from 'remotion';
import { RemotionRoot } from './Root';
registerRoot(RemotionRoot);

Programmatische Erstellung von Videos mit React.

Unique Funktionalität, nutzt React-Fähigkeiten, kraftvolle Videoerstellungskapazitäten.

Nischenanwendung, kann für Anfänger kompliziert sein.

Vivus ist eine leichtgewichtige JavaScript-Bibliothek für die Animation von SVGs. Mit über 15.1k Sternen auf GitHub ist sie eine gute Wahl für die Erstellung von SVG-Animationen.

npm install vivus

import Vivus from 'vivus';

new Vivus(
    'my-svg',
    {
        type: 'delayed',
        duration: 200,
        animTimingFunction: Vivus.EASE
    },
    myCallback
);

// svg
<object id='my-svg' type='image/svg+xml' data='link/to/my.svg'></object>;

Erstellung von Zeichenanimationen für SVGs.

Leichtgewichtig, spezialisiert auf SVGs, einfach zu bedienen.

Beschränkt auf SVGs, nicht für andere Arten von Animationen geeignet.

Lottie ist eine Bibliothek zum Rendern von Animationen, die in Adobe After Effects erstellt wurden. Mit über 29,9k Sternen auf GitHub ist sie weit verbreitet, um komplexe Animationen zu integrieren.

npm install lottie-web

import lottie from 'lottie-web';
import animationData from './animation.json';

lottie.loadAnimation({
    container: document.getElementById('animation'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    animationData: animationData
});

Integration von Animationen, die in After Effects erstellt wurden.

Hochwertige Animationen, lässt sich gut in After Effects integrieren.

Erfordert After Effects für die Erstellung von Animationen, größere Dateien.

ScrollReveal ist eine JavaScript-Bibliothek, die es einfach macht, Elemente während ihres Eintritts oder Verschwindens aus dem Bildschirmbereich zu animieren. Mit mehr als 22.2k Sternen auf GitHub ist es perfekt für scrollbasierte Animationen geeignet.

npm install scrollreveal

import ScrollReveal from 'scrollreveal';

ScrollReveal().reveal('.box', { delay: 500 });

<h1 class="headline">Widget Inc.</h1>

Hinzufügen von scrollbasierten Reveal-Animationen.

Leicht zu verwenden, leichtgewichtig, großartig für scrollbasierte Animationen

Beschränkt auf scrollbasierte Animationen.

ScrollMagic ist eine Bibliothek zum Erstellen von scrollbasierten Interaktionen und Animationen. Mit mehr als 14.8k Sternen auf GitHub bietet es eine robuste Methode zur Behandlung von scrollbasierten Animationen.

npm install scrollmagic

import ScrollMagic from 'scrollmagic';

const controller = new ScrollMagic.Controller();
var controller = new ScrollMagic.Controller();

// create a scene
new ScrollMagic.Scene({
    duration: 100, // the scene should last for a scroll distance of 100px
    offset: 50 // start this scene after scrolling for 50px
})
    .setPin('#my-sticky-element') // pins the element for the the scene's duration
    .addTo(controller); // assign the scene to the controller

Erstellen komplexer scrollbasierter Interaktionen und Animationen.

Leistungsstark, flexibel, funktioniert gut mit GSAP.

Kann für einfache Animationen kompliziert sein, größeres Paketsize.

Typed.js ist eine JavaScript-Bibliothek, die Texttypen, sodass es aussieht, als ob er von einem Menschen getippt wird. Mit über 15.1k Sternen auf GitHub ist es großartig für das Hinzufügen von Tippanimationen.

npm install typed.js

import Typed from 'typed.js';

const typed = new Typed('#element', {
    strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
    typeSpeed: 50
});

Erstellen von Tippanimationen für Text.

Leicht zu verwenden, leicht, großartig für Tippeffekte.

Beschränkt auf Tippanimationen, weniger Flexibilität.

Three.js ist eine leistungsstarke 3D-Bibliothek für JavaScript, die es Ihnen ermöglicht, komplexe 3D-Animationen und Visualisierungen zu erstellen. Mit über 101k Sternen auf GitHub ist es weit verbreitet für 3D-Webanwendungen.

npm install three

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Erstellung fortschrittlicher 3D-Animationen und Visualisierungen.

Extrem leistungsstark, großartige Community, unterstützt komplexe 3D-Szenen.

Steiler Lernkurve, größere Paketsize.

Theatre.js ist eine fortschrittliche Animationsbibliothek zur programmatischen Erstellung und Steuerung von Animationen. Mit über 11k Sternen auf GitHub bietet sie einen zeitlinienbasierten Ansatz für Animationen.

# r3f and its dependencies
npm install --save react three @react-three/fiber

# Theatre.js
npm install --save @theatre/[email protected] @theatre/[email protected] @theatre/[email protected]

# Three.js types (when using Typescript)
npm install --save-dev @types/three

import * as THREE from 'three'
import { createRoot } from 'react-dom/client'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { getProject } from '@theatre/core'

// our Theatre.js project sheet, we'll use this later
const demoSheet = getProject('Demo Project').sheet('Demo Sheet')

const App = () => {
  return (
    <Canvas
      camera={{
        position: [5, 5, -5],
        fov: 75,
      }}
    >
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <mesh>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="orange" />
      </mesh>
    </Canvas>
  )
}

createRoot(document.getElementById('root')!).render(<App />)

Erstellen von zeitlinienbasierten Animationen mit feiner Kontrolle.

Mächtige Timeline-Steuerung, präzise Animationssequenzen.

Neuere Bibliothek, kleinere Community, komplex für Anfänger.

Die Wahl der richtigen Animationsbibliothek hängt von den Bedürfnissen und der Komplexität Ihres Projekts ab. Wenn Sie einfache, schnelle Animationen benötigen, sind CSS-basierte Bibliotheken wie Animate.css ideal. Für komplexere Interaktionen und Hochleistungsanforderungen sollten Sie leistungsstarke Bibliotheken wie GSAP oder Three.js in Betracht ziehen.

Jede Bibliothek hat ihre Stärken, also bewerten Sie sie anhand von Faktoren wie Benutzerfreundlichkeit, Community-Support und den von Ihnen benötigten spezifischen Funktionen. Sie können mit diesen Top-Animationsbibliotheken experimentieren, bevor Sie sie in Ihr Projekt implementieren.

Haben Sie andere Bibliotheken, die es wert sind, erwähnt zu werden? zögern Sie nicht, sie in den Kommentaren unten zu teilen! Wenn Sie diesen Beitrag hilfreich fanden, teilen Sie ihn mit Ihren Entwicklerkollegen und entdecken Sie weitere Tutorials auf dieser Website.

Danke. Have a good day!

Source:
https://devaradise.hashnode.dev/top-15-animation-libraries-for-react-modern-javascript-apps-clyppjb22000b09l26nxe85v7