Doc > Nodes > EVENT > ScrollTrigger

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 to false
  • param scroller to #scroll-container
  • param markers to true

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
Is this doc helpful/not helpful? Is there any information you would like that is not available? Don't hesitate to get in touch with any question or feedback, either by email, on Discord or the forum.