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