Анимация компонентов React с помощью react-scrollmagic

Я пытаюсь разобраться с react-scrollmagic и react-gsap, и я пытаюсь добиться постепенного появления/исчезновения непрозрачности при прокрутке при прокрутке от одного компонента к следующему, похожему на то, что видно здесь, однако я едва добиваюсь какого-либо прогресса... Я могу дочерние элементы с tween , но не может распространять его на уровень компонентов. Может ли кто-нибудь помочь мне понять реализацию? Вот где я нахожусь в данный момент:

    /*./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>

Спасибо!


reactjs scrollmagic
person Ben    schedule 08.02.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Хорошо, у меня все работает, прокрутка, похоже, не работает на уровне компонентов, поэтому ее нужно реализовать в отдельных компонентах.

Этот фрагмент будет плавно переходить от первого ко второму элементу, сохраняя при этом наложенный текст видимым. Я использую это в сочетании с фоновым изображением, которое фиксировано, но затемняется до непрозрачности 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>
person Ben    schedule 12.02.2019