REACT HOOKS, GSAP 3 and ScrollMagic

So I am starting to mess with the new latest and greatest in the front end world after taking a new position, I will be updating this more hopefully from here on out. I am just starting out messing with this, so take from it what you will.

 
import React, { useState, useEffect } from "react";
import Header from "../Common/Layout/Header/Header";
import ApproachPanelMain from "./ApproachPanel/ApproachPanelMain";
import EnterprisePanelMain from "./EnterprisePanel/EnterprisePanelMain";
import DevelopersHelpMain from "./DevelopersHelp/DevelopersHelpMain";
import FooterLanding from "./FooterLanding";
import * as ScrollMagic from "scrollmagic";
import gsap, { TimelineMax, TweenMax, TweenLite } from "gsap";
import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";
ScrollMagicPluginGsap(ScrollMagic, TweenMax, TimelineMax);
function LandingMain() {
  const [scrollMagic, setScrollMagic] = useState({
    controller: new ScrollMagic.Controller(),
    timelineOne: gsap.timeline()
  });
  const { controller, timelineOne } = scrollMagic;
  useEffect(() => {
    timelineOne.to("#animation", { x: "-100vw" });
    new ScrollMagic.Scene({
      triggerElement: "#test-trigger",
      duration: 400
    })
      .setTween(timelineOne)
      .addTo(controller);
  }, []);
  return (
    <div style={{ position: "relative", overflowX: "hidden" }}>
      <div style={{ position: "fixed", top: "0" }}>
        <Header />
      </div>
      <div style={{ position: "relative", top: "100vh" }}>
        <EnterprisePanelMain />
      </div>
      <ApproachPanelMain />
      <div id="test-trigger"> </div>
      <div id="animation" style={{ position: "relative", left: "100vw" }}>
        <DevelopersHelpMain />
      </div>
      <FooterLanding />
    </div>
  );
}

export default LandingMain;