图片缩放

从左到右，图片在逐渐缩小。

| gsap 和 React实现它

.img-container {
  width: 100%;
  height: 960px;
  position: relative;
  overflow: hidden;
  &:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #fff;
    top: 0;
    right: 0;
  }
  img {
    width: 100%;
    margin: 0 auto;
  }
}

import React, { useRef, useEffect } from "react";
import "./App.min.css";
import People from "./images/people.webp";
import { TimelineLite, Power2 } from "gsap";
import CSSRulePlugin from "gsap/CSSRulePlugin";
const App = () => {
  let image = useRef(null);
  let container = useRef(null);
  let imageReveal = CSSRulePlugin.getRule(".img-container:after"); // 图片after
  let tl = new TimelineLite();
/*
    三个步骤
  1. 设置可见
  2. after元素右移
  3. 图片缩小可见
*/
  useEffect(() => {
    tl.to(container, 0, { css: { visibility: "visible" } }); 
    tl.to(imageReveal, 1.4, { width: "0%", ease: Power2.easeInOut });
    tl.from(image, 1.4, {
      scale: 1.6,
      ease: Power2.easeInOut,
      delay: -1.4
    });
  });
  return (
    <section className="main">
      <p>GSAP IMAGE REVEAL</p>
      <div className="container" ref={el => (container = el)}>
        <>
          <div className="img-container">
            <img
              ref={el => {
                image = el;
              }}
              src={People}
            />
          </div>
        </>
      </div>
    </section>
  );
};
export default App;

展示