How to trigger P5js sketch with scroll

p5.js Coding Questions
1

please format code with </> button * homework policy * asking questions

I am currently working on a project where I need to have multiple p5 sketches on the same page. For this, I am going to use p5 instance mode. The problem is that I want to make a single page scroll but:

  1. some of my sketches have sound which will cause multiple sounds to play at the same time.
  2. it will probably be too heavy for the browser

what i want is to trigger the sketches only when they are visible in the viewport, can someone help me? I know some scroll trigger libraries as greensock but i don’t know how to use it in my favor.

javascript

2

add this style to your CSS

canvas{
content-visibility: auto;
}

let me know if this works or not
this is a new CSS property