Top 8 thư viện Animation cho React Apps và Javascript

Animations đẹp có thể đưa ứng dụng web của bạn từ tốt đến tuyệt vời bằng cách làm cho chúng hấp dẫn. Chúng cung cấp phản hồi trực quan, hướng dẫn người dùng qua giao diện và thêm nét cá tính cho dự án của bạn.

Có rất nhiều thư viện hoạt ảnh từ các thư viện đơn giản, dựa trên CSS đến các thư viện JavaScript mạnh mẽ có khả năng tạo các hoạt ảnh phức tạp. Trong bài viết này, chúng ta sẽ đi sâu vào 8 thư viện hoạt ảnh hàng đầu cho React và các ứng dụng web hiện đại.

Từ React Spring và Framer Motion nổi tiếng đến các thư viện chuyên dụng như Three.js, bạn sẽ tìm thấy ở đây thứ gì đó có thể giúp các dự án web của bạn tỏa sáng. Hãy cùng khám phá những thư viện này và xem chúng có thể biến đổi trải nghiệm người dùng trang web của bạn như thế nào!

1. Animate.css – CSS Animation

Animate.css là một thư viện CSS phổ biến, cung cấp nhiều loại hoạt ảnh đã được định nghĩa sẵn, giúp việc áp dụng hoạt ảnh vào bất kỳ dự án web nào trở nên dễ dàng. Với hơn 80.200 sao trên GitHub và hàng triệu lượt tải từ npm, Animate.css là lựa chọn hàng đầu cho các hoạt ảnh nhanh chóng và đơn giản.

Cài đặt và sử dụng

npm install animate.css

import 'animate.css';

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

React Spring là một thư viện hoạt ảnh phổ biến dành cho React, cung cấp cách tạo hoạt ảnh mạnh mẽ và linh hoạt dựa trên vật lý lò xo. Với hơn 27.800 sao trên GitHub, thư viện này được sử dụng rộng rãi trong cộng đồng.

Cài đặt và sử dụng

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;

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;

npm install animejs

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

anime({

    targets: 'div',

    translateX: 250,

    rotate: '1turn',

    duration: 800

});

npm install gsap

import { gsap } from 'gsap';

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

npm install popmotion

import { animate } from 'popmotion';

animate({

    from: 0,

    to: 100,

    onUpdate: (latest) => {

        console.log(latest);

    }

});

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();

# new project
npx create-video@latest

# install to existing project
npm i --save-exact remotion@4.0.181 @remotion/cli@4.0.181

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}

      />

    </>

  );

};