motion.jsx

import React from 'react';
import styled from 'styled-components';
import { Controller, Scene } from 'react-scrollmagic';
import { Tween, Timeline } from 'react-gsap';

const Wrap = styled.div`
  background-color: silver;
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 100%;
`;

const LandingApp = () => (
  <Wrap>
    <Controller>
      <Scene offset={20} triggerHook='onLeave' duration={2000} pin indicators>
        <Timeline
          wrapper={
            <div
              style={{
                backgroundColor: 'gray',
                height: '100vh',
                width: '300px',
                overflow: 'hidden',
                position: 'relative',
                margin: '20px auto',
              }}
            />
          }
          target={
            <p>Ocus Pocus</p>
          }
        >
          <Tween from={{ y: 0, color: 'navy' }} to={{ y: 100, color: 'green' }} />
          <Tween from={{ color: 'blue' }} to={{ color: 'red' }} />

          <Timeline
            delay={-2}
            wrapper={
              <div
                style={{
                  overflow: 'hidden',
                  position: 'relative',
                  margin: '20px auto',
                  backgroundColor: 'white',
                  color: 'white',
                }}
              />
            }
            target={
              <p>XABLAU</p>
            }
          >
            <Tween from={{ x: 0, color: 'red' }} to={{ x: 100, color: 'green' }} />
            <Tween from={{ color: 'blue' }} to={{ color: 'navy' }} />
          </Timeline>
        </Timeline>

      </Scene>
    </Controller>
  </Wrap>
);

export default LandingApp;