Компоненты Animating React с помощью реакции-скроллмагии - PullRequest
Новая
       8

Компоненты Animating React с помощью реакции-скроллмагии

0 голосов
/ 08 февраля 2019

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

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

Спасибо!

1 Ответ

0 голосов
/ 12 февраля 2019

Хорошо, у меня все работает, 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>
...