CoordiScroll Demos

Scroll the Number Line

Try scrolling the number line!

See Creating Scroll Functions section for more information.

Proportional: proportional

Scrolls are coordinated by proportion of the scrollable content.

Relative Springy: relSpring

Relative springy scrolls the elements, keeping their intial offsets synced. When an element reaches an end, it stays at the end, but if a channel the element is listening to moves, it "springs" back to its synced position.

Relative Loopy: relLoop, relLoopDxy

Relative Loopy also keeps initial offsets synced, but when an element reaches an end, it loops back to the other side.

Relative Soft: relSoft

Relative soft keeps initial offsets synced until elements reach the end. If the user continues scrolling, the subscriber element will lose its offset.

In addition there are several more default scroll functions defined in scrollfuncs.js!

Creating Scroll Functions

A scroll function returns x and a y position where the element will scroll to. Scroll functions activate when the channel the element's account is subscribed to broadcasts a message. You can think of it as $x_{el}, y_{el} := f(x_{msg}, y_{msg})$. For the number line demo we are only using the x scroll, so you can think of msg.x as the $t$ in a parametric equation.

Don't forget that the y axis starts from the top left, and consider any possible unit conversions. Check out scrollfuncs.js to see how the default scroll functions are implemented.