JavaScript Scroll Animation (ScrollMagic)

Have been watching some tutorials and testing out the ScrollMagic feature with GASP, yet this animation won’t work on my page (object is sticky). Pretty new to coding, so likely a simple solution to this. Thanks

const flightPath = {
    curviness: 1,
    autoRotate: true,
    values: [
        { x: 100, y: -30},
        { x: 300, y: 90},
    ]
}
const tweet = new TimelineLite();

tweet.add(
    TweenLite.to(".item", 1, {
        bezier: flightPath,
        ease: Power1.easeInOut
    })
);

HTML

<section> 
  <img class="item" src="images/paper.png" alt="img">
</section>


<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/BezierPlugin.min.js" ></script>

<script> src="app.js"</script>   

CSS

.item {
    height: 60px;
    position: relative;
    top: 50%;
    left: 0;
}