SheltonR
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by SheltonR
-
-
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.
How to show and hide canvas images using scrollTrigger
in GSAP
Posted
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!