Question

我试图与react-scrollmagic和react-gsap保持联系，并尝试在从一个组件滚动到下一个组件时实现类似于滚动激活的不透明淡入/淡出功能。见过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的不透明度。让我知道是否需要更多详细信息。

undefined

用react-scrollmagic动画化React组件

1 个答案: