使用 react-scrollmagic 动画 React 组件

Question

我正在努力掌握 react-scrollmagic and react-gsap and am attempting to achieve a scroll activated opacity fade-in/fade-out when scrolling from one component to the next similar to that seen here 但是我几乎没有取得任何进展...我可以使用补间动画来创建子元素，但不能将其扩展到组件级别。任何人都可以帮助我理解实施吗？这是我现在所在的位置：

    /*./Components/Test.js */

    import React, { Component }  from "react";

    class Test extends Component {
      render() {
        return (
          <div id={this.props.id}>Component</div>
        );
      }
    }

    /* App.js */

    import React from 'react';
    import { Tween, Timeline } from 'react-gsap';
    import { Controller, Scene } from 'react-scrollmagic';
    import Test from "./Components/Test";

    <div className="App">
      <Controller>
          <Scene duration={50} triggerElement="#test">
          {(progress) => (
            <Tween
            from={{
              css: {
                opacity: '1',
              },
              ease: 'Circ.easeOutExpo',
            }}
            to={{
              css: {
                opacity: '0',
              },
              ease: 'Circ.easeOutExpo',
            }}
              totalProgress={progress}
              paused
            >
            <Test id='test'/>
            </Tween>    
          )}
        </Scene>
      </Controller>
    </div>

谢谢！

Answer 1

好的，我成功了，scrollmagic 似乎在组件级别上不起作用，因此需要在各个组件中实现它。

此代码段将从第一个元素到第二个元素以平滑的淡入淡出效果过渡，同时保持覆盖文本可见。我将它与固定的背景图像结合使用，但在到达第二个元素时会逐渐淡化为 0.9 的不透明度。如果需要更多详细信息，请告诉我。


    <div>
      <Controller>
          <Scene duration={300} triggerElement="#first-container" offset={500}>
          {(progress) => (
            <Tween
            from={{
              css: {
                opacity: '1',
              },
              ease: 'Circ.easeOutExpo',
            }}
            to={{
              css: {
                opacity: '0.1',
              },
              ease: 'Circ.easeOutExpo',
            }}
              totalProgress={progress}
              paused
            >
              <div id='first-container' style={{backgroundColor:'blue',height:'100vh'}}>
                  <div id='first-content'>
                    <h1 >Header1</h1>
                  </div>
              </div>
            </Tween>    
          )}
        </Scene>
      </Controller>
      <div id='second-container' style={{backgroundColor:'red',height:'100vh'}}>
        <Controller>
          <Scene duration={300} triggerElement="#first-container" offset={500}>
          {(progress) => (
            <Tween
            from={{
              css: {
                opacity: '0',
              },
              ease: 'Circ.easeOutExpo',
            }}
            to={{
              css: {
                opacity: '0.9',
              },
              ease: 'Circ.easeOutExpo',
            }}
              totalProgress={progress}
              paused
            >
                <div id='second-content' style={{height:'100%'}}>
                  <h1 >header2</h1>
                  <p >test</p>
                </div>
            </Tween>    
            )}
          </Scene>
        </Controller>
      </div>
    </div>

使用 react-scrollmagic 动画 React 组件

Animating React components with react-scrollmagic

reactjs

scrollmagic