New here! - How to prevent restart on scroll (fromTo)

[JimmyK]

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!

[mikel]

Hey @JimmyK,

 

Welcome to the GreenSock Forum.

Take a look at the new GSAP scrollTrigger.

 

Happy scrolling ...

Mikel