Hey guys. First post here.
I'm a graphic design and front-end student out of Zealand, Denmark. We are only learning JQuery at my school, but I am a hard learner, so I am looking for other options. I am currently learning vanilla JS, and randomly found this amazing library.
So far everything has been super awesome.
I'm facing one issue though. I am animating the height of an image. I added an AddEventListener, as I want the animation to start at a specific point on my site.
Basically what I want to do is to animate the photo when it reaches the destination of the position. I have other things attached to the Eventlistener which works as it should. But my image keeps restarting when I scroll. Is there anything I can do to have it animate the height and then stick to that height even when I scroll.
I tried adding repeat: 0, and I tried to add an onComplete.
I have lots of code that works as it should. So I'll just paste the code I have issues with:
function scrollAppear(){
const macbook = document.querySelector("#macbookLight");
const mbPos = macbook.getBoundingClientRect().top;
const imagePos = window.innerHeight /1.5;
if(mbPos < imagePos){
const tl = gsap.timeline();
tl.fromTo(macbook, 2, {height: 0}, {height: 500});
}
}
window.addEventListener("scroll",scrollAppear);
I'd appreciate any help I can get, I have been searching Google without any luck.
Thanks!