Jump to content
Search Community

How to show and hide canvas images using scrollTrigger

SheltonR test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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:

 

  1. 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.
  2. 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

  • Solution
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:
  1. 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

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!

  • Like 1
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.
×
×
  • Create New...