Chcę zrobić animację w GSAP polegającą na przemieszeniu się obrazka od lewej do prawej strony ekranu. Nie mam pojęcia, gdzie może leżeć błąd. Załączam kod:
const logBtn = document.querySelector("#log-btn");
const paperPlane = document.querySelector(".paper-plane");
const tl = new TimelineLite();
logBtn.addEventListener("submit", function (){
if(document.querySelector("#password").value == 1122){
const flightPath = {
curviness: 1.25,
autoRotate: true,
values: [{x: 100, y: -20},
{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: -150}]};
tl.set(paperPlane, {display: 'block'});
tl.from(paperPlane, 1, {x: -100})
.to(paperPlane, 1, {bezier: flightPath, ease: Power1.easeInOut});
} else{
document.querySelector(".warning").style.display = "block";
}
});
<div class="log-in">
<p>Enter your PIN:</p>
<input type="password" id="password" maxlength="4">
<button type="submit" id="log-btn">Blow It Away</button>
</div>
<section class="animation">
<img class="paper-plane" src="paper.png">
</section>
<div class="warning"></div>