# How to trigger P5js sketch with scroll

**URL:** <https://discourse.processing.org/t/how-to-trigger-p5js-sketch-with-scroll/26990>\
**Category:** Coding Questions\
**Created:** [January 12, 2021, 12:00am UTC](https://discourse.processing.org/t/how-to-trigger-p5js-sketch-with-scroll/26990 "2021-01-12T00:00:14Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![robert](https://avatars.discourse-cdn.com/v4/letter/r/e95f7d/32.png) [@robert](https://discourse.processing.org/u/robert)\
**Post date:** [January 12, 2021, 12:00am UTC](https://discourse.processing.org/t/how-to-trigger-p5js-sketch-with-scroll/26990/1 "2021-01-12T00:00:14Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

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](https://stackoverflow.com/questions/tagged/javascript)

---

<div class="post-metadata">

**Author:** ![ReyzArtz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/reyzartz/32/11750_2.png) [@ReyzArtz](https://discourse.processing.org/u/ReyzArtz)\
**Post date:** [January 12, 2021, 6:57am UTC](https://discourse.processing.org/t/how-to-trigger-p5js-sketch-with-scroll/26990/2 "2021-01-12T06:57:45Z")

</div>

add this style to your CSS

```auto
canvas{
content-visibility: auto;
}

```

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