Documentation

Introduction

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;">
  <el-meister>
    lol wut
  </el-meister>
</scroll-meister>

Concepts

Guide Layout

Behaviors

^guidelayout

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

guides

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.

width

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>

^fadein

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.

guides

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>

height

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>

spacing

mode

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>

followerMode

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>

pinAnchor

Default: center

pinOffset

Default: 0

clip

dependencies

interpolate ← layout

translate ← interpolate

animate

objectfit

scrub ← interpolate

scratch ← interpolate

fullscreenable ← layout

touchblock ← ?fullscreenable

gallery

youtube

glfx