What it is good for

When not to use it

Scrollmeister solves a particular problem really well, but it is important to understand when not to use Scrollmeister.

<scroll-meister guidelayout="foo:bar;">
    lol wut


Guide Layout



The guidelayout behavior can be added to the <scroll-meister> element. It defines the available guides and the maximum content width.


Default: none

Guides are vertical lines that elements snap to. They have a name, position and width. Learn more about guide layout.

<scroll-meister guidelayout="guides: left 0 1vmin, center 0.5 0, right 0 1vmin;"></scroll-meister>

A special viewport guide keyword is always defined. It can be used in the layout behavior for both left and right guides. It will snap the element the left or right edge of the viewport.


Default: 1280px

The width property specifies the maximum width for an imaginary wrapper for the guides to orient. It is always centered in the viewport like a container element. Once the viewport becomes too narrow, it get's fluid and has the full width. Guides never leave the viewport.

<scroll-meister guidelayout="width: 960px;"></scroll-meister>

^debugguides ← ^guidelayout

Draws the guides on top of the page so you can see them. Doesn't accept any properties. Requires the guidelayout behavior.

<scroll-meister debugguides></scroll-meister>


Does nothing except for setting opacity to 0 as soon as it is attached. Doesn't accept any properties. This is useful to prevent the flash-of-unlayout.

<scroll-meister fadein style="opacity: 0; transition: opacity 0.5s ease-in-out;"></scroll-meister>

layout ← ^guidelayout

The core behavior to layout elements.


Default: viewport viewport

The name of two guides (defined in guidelayout) that the element will snap to.

<!--This element spans the right half of the viewport, assuming a "center" guide has been defined-->
<el-meister layout="guides: center viewport;"></el-meister>


Default: auto

Values like 100px or 50vh work as you would expect them. Percentages such as 50% are relative to the width of the element. This allows you to define elements with a fixed aspect ratio. There is also syntactic sugar for ratios using something like 1920/1080 will be converted to percentages internally.

<!--This element will always have an aspect ratio of 16:9.-->
<el-meister layout="height: 16/9;"></el-meister>



Default: flow

There are two layout modes flow and follow. The flow mode works as you'd expect by putting each element below the previous one (note: the order can be influenced using the dependencies property). The follow mode removes the element from the document flow and instead makes it follow its leaders (see followerMode and dependencies).

<!--This element flows regularly.-->
<el-meister layout="mode: flow;"></el-meister>

<!--This element follows the above element and does not affect the flow.-->
<el-meister layout="mode: follow;"></el-meister>

<!--This element flows regularly behind the very first one, ignoring the follower.-->
<el-meister layout="mode: flow;"></el-meister>


Default: parallax

A follower can follow its leader in either a parallax or a pin fashion.

<!--This element follows its leader in a parallax motion.-->
<el-meister layout="mode: follow; followerMode: parallax;"></el-meister>
<!--This element follows its leader and is pinned while the leader is inside the viewport.-->
<el-meister layout="mode: follow; followerMode: pin;"></el-meister>


Default: center


Default: 0



interpolate ← layout

translate ← interpolate



scrub ← interpolate

scratch ← interpolate

fullscreenable ← layout

touchblock ← ?fullscreenable