Animating React components with react-scrollmagic

Question

I'm trying to get to grips with 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 however i'm barely making any progress... I can child elements with tween, but cannot extend it onto the component level. Can anyone help me understand the implementation? This is where I am at at the moment:

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

Thanks!

Ben · Accepted Answer · 2019-02-12T09:54:01.900

Ok i got it working, scrollmagic doesn't seem to work on the component level, so it needs to be implemented within the individual components.

This snippet will transition with a smooth fade effect from the first to the second element, whilst keeping the overlaying text visible. I use this in combination with a background image that is fixed, but fades to an opacity of 0.9 when the second element is reached. Let me know if more detail on this is wanted.


    <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>

Animating React components with react-scrollmagic

1 Answers1