SheltonR Posted June 9, 2022 Share Posted June 9, 2022 Hey everyone, So I'm working on making an animation by drawing images to a canvas, and my final goal is to have a smooth animation that is controlled with a GSAP scrollTrigger so I can utilize scrubbing and pinning. I had two questions I was hoping to get some help on: How would I change the display style of each individual image to make it hidden or show? To create the images I am just making a new Image() object. Is there a way to run a function for every scroll in the scrollTrigger so I can update the necessary images? I am also using NextJS so I'm not sure if that would change anything but I just wanted to point that out. Link to comment Share on other sites More sharing options...
Solution GreenSock Posted June 9, 2022 Solution Share Posted June 9, 2022 59 minutes ago, SheltonR said: How would I change the display style of each individual image to make it hidden or show? To create the images I am just making a new Image() object. Probably image.style.visibility = "hidden" | "inherit"; Is that what you're asking? 1 hour ago, SheltonR said: Is there a way to run a function for every scroll in the scrollTrigger so I can update the necessary images? You can add an onUpdate callback to your ScrollTrigger(s) Good luck! Link to comment Share on other sites More sharing options...
SheltonR Posted June 9, 2022 Author Share Posted June 9, 2022 4 minutes ago, GreenSock said: Probably image.style.visibility = "hidden" | "inherit"; Is that what you're asking? You can add an onUpdate callback to your ScrollTrigger(s) Good luck! Yup that was exactly what I was looking for! The onUpdate works perfectly. I had found one solution where I clear the canvas and draw the new image inside the onUpdate function which works but I'll try it with the image.style.visibility solution as well to see which works best. Thanks so much! 1 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