玩转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
• MotionPath
• MouseEffect
• scale image

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={`flex min-h-[40vmin] max-w-[40vmin] items-center justify-center rounded-md transition-all hover:scale-105 ${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",
      });
    });
  });
});

MouseEffect

scale image

ScaleImage