玩转gsap

gsap

GSAP（GreenSock Animation Platform）是一个专业级的JavaScript动画库，用于现代Web动画。它可以对JavaScript可以操作的所有内容进行动画处理（CSS属性，SVG，React，画布，通用对象等），同时解决了不同浏览器上存在的兼容性问题，而且速度极快（比jQuery 快20倍）¹。大约有1000万个站点和许多主要品牌都使用 GSAP³。

(1) GSAP - GreenSock. https://greensock.com/gsap/.

(2) GSAP（GreenSock）：最健全的web动画库之一 - 知乎. https://zhuanlan.zhihu.com/p/145332205.

(3) gsap - npm. https://www.npmjs.com/package/gsap.

scrollTriger

import gsap from 'gsap';
import { useEffect } from 'react';


const App = () => {
    const items = ['color-warm-frame', 'color-spring-warmth', 'color-night-fade']
    useEffect(() => {
        import('gsap/ScrollTrigger').then(res => {
            const ScrollTrigger = res.default
            gsap.registerPlugin(ScrollTrigger)
            gsap.to(`.${items[items.length - 1]}`, {
                x: "40vmin", duration: 3, rotation: 360,
                scrollTrigger: {
                    trigger: `.${items[items.length - 1]}`,
                    start: "top center",
                    end: "top 100px",
                    scrub: true,
                    markers: true,
                    id: "box3",
                }
            })
            const anim = gsap.to(`.${items[0]}`, {
                x: '40vmin',
                rotation: 360,
                duration: 3
            });
            ScrollTrigger.create({
                trigger: `.${items[0]}`,
                animation: anim,
                start: "top 500px",
                end: "top 50px",
                scrub: true,
                markers: true,
                id: "box1"

            })
        })
    })
    return <div>
        <ul className="grid grid-cols-1 gap-5">
            {items.map((item, index) => (
                <li key={index} className={`min-h-[40vmin] max-w-[40vmin] rounded-md flex items-center hover:scale-105 transition-all justify-center ${item}`}>box{index + 1}</li>
            ))}
        </ul>
    </div>
}
export default App;

MotionPath

 useEffect(() => {
        import('gsap/MotionPathPlugin').then(res => {
            const MotionPathPlugin = res.default;
            gsap.registerPlugin(MotionPathPlugin);
            gsap.set(".astronaut", { scale: 0.5, autoAlpha: 1 });
            const anim = gsap.to(".astronaut", {
                duration: 5,
                ease: "power1.inOut",
                immediateRender: true,
                motionPath: {
                    path: "#path",
                    align: "#path",
                    alignOrigin: [0.5, 0.5],
                    autoRotate: 90
                }
            });

            import('gsap/ScrollTrigger').then(res => {
                const ScrollTrigger = res.default;
                ScrollTrigger.create({
                    trigger: `.astronaut`,
                    animation: anim,
                    start: "top 400px",
                    end: "top 150px",
                    scrub: true,
                    markers: true,
                    id: "astronaut"

                })
            })


        })
    })