Doc > Nodes > EVENT > ScrollTrigger
Triggers events based on page scroll
Description
In order to test the event/ScrollTrigger node, you can create the following setup:
using Polygonjs local app, add the following line to the EditorConfig.ts
file, inside the configureEditor
function:
options.api.panel.viewer.setData({viewerId: 'my-viewer', html: require('./viewer.html')})
and create a file viewer.html
in the same folder as EditorConfig.ts
, containing the following:
<div id="main-container" style="position: relative; height: 100%">
<div id="my-viewer" style="position: absolute; width: 100%; height: 100%"></div>
<div id="scroll-container" style="position: relative; height: 100%; overflow-y: scroll">
<div id="checkpoint1" style="height: 400px; color: white">checkpoint 1</div>
<div id="checkpoint2" style="height: 400px; color: red">checkpoint 2</div>
<div id="checkpoint3" style="height: 400px; color: green">checkpoint 3</div>
<div id="checkpoint4" style="height: 400px; color: lightred">checkpoint 4</div>
</div>
</div>
Then reload the editor. You will then see the viewer with a scrollbar and other divs inside.
Then create a event/ScrollTrigger node, and set its parameters as follow:
- param
element
to#checkpoint2
- param
useViewport
tofalse
- param
scroller
to#scroll-container
- param
markers
totrue
You should now be able to connect other event nodes to the outputs of the scrollTrigger node, and have those be triggered as you scroll.
Parameters
Name | Type | Description |
---|---|---|
active | boolean | active |
element | string | selector of the element the scroll events are detected for |
useViewport | boolean | use viewport as scroller |
scroller | string | override the scroller |
markers | boolean | add markers for debugging |
tprogress | boolean | define if progress should be updated |
progress | float | progress |
tinsideElement | boolean | define if the scroll is inside the element |
insideElement | boolean | 1 if the scroll is inside the element |
onToggle | boolean | sends a trigger when we leaving or entering the element |
onEnter | boolean | sends a trigger when entering the element |
onLeave | boolean | sends a trigger when leaving the element |
onEnterBack | boolean | sends a trigger when entering again the element |
onLeaveBack | boolean | sends a trigger when leaving again the element |