He estado viendo algunos tutoriales y probando la función ScrollMagic con GASP, pero esta animación no funciona en mi página (el objeto es pegajoso). Bastante nuevo en la codificación, por lo que probablemente sea una solución simple para esto. Gracias

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