gsap.registerPlugin(MotionPathPlugin);
const tween = gsap.timeline();
tween.to(".paper-plane", {
duration: 1,
ease: "power1.inOut",
motionPath: {
path: [{
x: 100,
y: 0
},
{
x: 300,
y: 10
},
{
x: 500,
y: 100
},
{
x: 750,
y: -100
},
{
x: 350,
y: -50
},
{
x: 600,
y: 100
},
{
x: 800,
y: 0
},
{
x: window.innerWidth,
y: -250
}
],
curviness: 2,
autoRotate: true
}
});
const controller = new ScrollMagic.Controller();
const scene = new ScrollMagic.Scene({
triggerElement: '.animation',
duration: 1000,
triggerHook: 0
})
.setTween(tween)
.setPin('.animation')
.addTo(controller)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header,
footer {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: "Montserrat", sans-serif;
}
header h1 {
font-size: 60px;
}
.animation {
width: 100%;
height: 800px;
position: absolute;
overflow: hidden;
}
.paper-plane {
position: absolute;
top: 0;
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/MotionPathPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<div class="animation">
<img class="paper-plane" src="https://i.postimg.cc/W1w9dT1x/paper.png" alt="Paper Plane">
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et ultrices neque ornare aenean. Tortor dignissim convallis aenean et tortor at risus. Ullamcorper eget nulla facilisi etiam dignissim
diam. Id diam maecenas ultricies mi eget mauris pharetra et ultrices. Vitae auctor eu augue ut lectus arcu. Dui nunc mattis enim ut. Tempor orci eu lobortis elementum nibh tellus molestie nunc non. Vel turpis nunc eget lorem dolor sed. A lacus vestibulum
sed arcu non odio euismod lacinia. Eget mi proin sed libero enim sed faucibus turpis in. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Sed ullamcorper morbi tincidunt ornare massa. Eu feugiat pretium nibh ipsum. Vitae elementum curabitur
vitae nunc sed. Vitae auctor eu augue ut lectus arcu. Mattis nunc sed blandit libero. In ante metus dictum at tempor commodo ullamcorper a. Mus mauris vitae ultricies leo integer malesuada nunc vel risus. Vivamus at augue eget arcu dictum varius. Faucibus
ornare suspendisse sed nisi lacus sed viverra. Pellentesque dignissim enim sit amet. A diam sollicitudin tempor id eu nisl nunc. Lobortis elementum nibh tellus molestie nunc non blandit massa. Et netus et malesuada fames ac turpis egestas integer. Vivamus
at augue eget arcu dictum varius duis. Ut sem nulla pharetra diam sit amet. Ipsum dolor sit amet consectetur adipiscing elit. Urna id volutpat lacus laoreet non. Commodo odio aenean sed adipiscing diam donec adipiscing tristique risus. Amet nulla facilisi
morbi tempus iaculis. Nullam vehicula ipsum a arcu cursus. Suspendisse sed nisi lacus sed. Tristique risus nec feugiat in fermentum posuere urna nec. In hac habitasse platea dictumst quisque sagittis. Nam at lectus urna duis convallis convallis tellus.
Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Orci sagittis eu volutpat odio. Magna eget est lorem ipsum dolor sit amet consectetur.
</div>