JimmyK Posted July 2, 2020 Share Posted July 2, 2020 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! Link to comment Share on other sites More sharing options...
mikel Posted July 2, 2020 Share Posted July 2, 2020 Hey @JimmyK, Welcome to the GreenSock Forum. Take a look at the new GSAP scrollTrigger. Happy scrolling ... Mikel 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now