如何在React中使用GSAP进行放大和缩小？

Question

当我向下滚动到第 1 部分内容时，它将慢慢放大以显示第 2 部分内容。当我向后滚动并保留第 2 部分的内容时，它将返回显示第 1 部分的内容。如果我再次向上滚动，它将显示与前面描述的相同的行为。

    import React, { useEffect } from 'react';
    import { gsap } from 'gsap';
    import { ScrollTrigger } from 'gsap/ScrollTrigger';
    
    const SampleZoom () => {
      useEffect(() => {
        // Initialize gsap and ScrollTrigger
        gsap.registerPlugin(ScrollTrigger);
    
        // Get the innerHeight
        const { innerHeight } = window;
    
        // Define the zoom-out animation
        gsap.from("#section1", {
          scale: 2, // Zoom out by scaling down
          opacity: 0, // Make it fade in
          scrollTrigger: {
            trigger: "#zoom-out",
            start: "top top", // Start the animation at the top of the element
            end: `+=${innerHeight * 0.5}`, // End the animation after scrolling down by 50% of the viewport height
            scrub: 1, // Add scrubbing effect
          }
        });
    
        // Define the zoom-in animation
        gsap.to("#section2", {
          scale: 1, // Zoom back in to normal size
          opacity: 1, // Make it fade in
          scrollTrigger: {
            trigger: "#zoom-in",
            start: "top top", // Start the animation at the top of the element
            end: `+=${innerHeight * 0.5}`, // End the animation after scrolling down by 50% of the viewport height
            scrub: 1, // Add scrubbing effect
          }
        });
      }, []);
    
      return (
        <div>
          <div id="section1">
           <h2>ROBO</h2>
          </div>
          <div id="section2">
            Hello world. I am Chitti, The Robot .. Speed 1 THz .. Memory 1 zettabyte. I'll be back. Get ready folks!"
The most expensive movie made in India till date has finally released and has already broken all box office records. Enthiran! This is the same movie that was originally supposed to start in 1998 with Kamal Hassan playing the lead role, then with vikram in the early 2000 and went on to cast Shah Rukh Khan a couple of years back and finally released with Rajnikanth playing the lead role. I managed to watch the movie a week into its release and like a farewell note sent by an IT/ITES employee, I have mixed feeling.
          </div>
        </div>
      );
    };
    
    export default SampleZoom;

请参考以下链接；它包含了我的要求所需要的内容。

我的要求视频

我尝试了多种方法，但一直无法找到解决这个问题的方法。请帮我。预先感谢。

Answer 1

为了实现基于滚动在

section1

和

section2

之间创建无缝过渡的缩放效果，您可以尝试链接动画并调整一些设置。然后，将

HTML > section1

设置为“缩小”触发器，这样它应该完全覆盖视口，然后

section2

将最初隐藏在

section1

下面，并在用户滚动时放大并变得可见。

设置初始样式：

• section1 开始放大，不透明度为 1。
• section2 开始缩小，不透明度为 0。

当用户开始滚动时定义 GSAP 动画时，

section1

应缩小并淡出。然后，该动画完成后，用户将看到

section2

。然后，当用户继续滚动时，

section2

应放大并淡入，变得完全可见。

这是一个例子，您可以根据我上面的解释得到一个想法：

import React, { useEffect } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

const SampleZoom = () => {
  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);

    const { innerHeight } = window;

    // Zoom-out animation for section1
    gsap.from("#section1", {
      scale: 2,
      opacity: 0,
      scrollTrigger: {
        trigger: "#section1",
        start: "top top",
        end: `+=${innerHeight * 0.5}`,
        scrub: 1,
      }
    });

    // Zoom-in animation for section2
    gsap.from("#section2", {
      scale: 2,
      opacity: 0,
      scrollTrigger: {
        trigger: "#section2",
        start: "top center",  // This will trigger the animation when section2 hits the middle of the viewport
        end: `+=${innerHeight}`,
        scrub: 1,
      }
    });
  }, []);

  return (
    <div>
      <div id="section1" style={{ height: '100vh', background: '#f4f4f4', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <h2>ROBO</h2>
      </div>
      <div id="section2" style={{ height: '100vh', background: '#e0e0e0', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '20px' }}>
        Hello world...
        {/* Rest of the content */}
      </div>
    </div>
  );
};

export default SampleZoom;

这应该确保动画在

section1

位于顶部（顶部顶部）时开始，并且当您滚动时缩小并淡出，第 2 部分的动画在该部分碰到视口的

center

时开始

(top center)

。根据您的设计，您可能需要根据您的设计要求调整开始值和结束值或其他属性，因为此代码是实现的基本示例，可帮助您开始获得所需的效果。