install gsap via npm instead of script tag

public/index.html

@@ -34,7 +34,7 @@
     <div id="root">
     </div>
 
-    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js?r=5426'></script>
-    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js'></script>
+    <!-- <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js?r=5426'></script>
+    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js'></script> -->
   </body>
 </html>

src/components/app/index.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react'
 import cn from 'classnames'
+import { ScrollTrigger } from 'gsap/all'
 import slide2 from './img/slide2.png'
 import style from './style.module.scss'
 
@@ -11,17 +12,17 @@ export const App = () => {
   const refSlide5 = useRef(null)
 
   useEffect(() => {
-    let sections = [refSlide1, refSlide2, refSlide3, refSlide4, refSlide5].map(ref => ref.current);
+    const sections = [refSlide1, refSlide2, refSlide3, refSlide4, refSlide5].map(ref => ref.current);
     sections.forEach((panel, i) => {
-      window.ScrollTrigger.create({
+      ScrollTrigger.create({
         trigger: panel,
         start: "top top", 
         pin: true, 
         pinSpacing: false
       });
     });
 
-    window.ScrollTrigger.create({
+    ScrollTrigger.create({
       snap: 1 / (sections.length - 1)
     });
   }, [refSlide1, refSlide2, refSlide3, refSlide4, refSlide5])

src/index.js

@@ -1,9 +1,10 @@
 import React from 'react'
 import { render } from 'react-dom'
 import { App } from './components/app'
+import { gsap, ScrollTrigger } from 'gsap/all'
 import './index.scss'
 
-window.gsap.registerPlugin(window.ScrollTrigger)
+gsap.registerPlugin(ScrollTrigger)
 
 render(
   <App />,