Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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

Recommended Posts

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




I'd appreciate any help I can get, I have been searching Google without any luck. 


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.