animation-director

Animation Director is an element that gives you attribute hooks in your css to tell when things happen on screen

Polyfills

The only real thing you'd need for animation director is the IntersectionObserver polyfill

<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>

Attributes: Added to markup by you

data-rootmargin

data-rootmargin controls the rootmargin of the intersection observer for the animation-director

Example

<animation-director data-rootmargin="-50%"></animation-director>

data-threshold

data-threshold controls the threshold of the intersection observer for the animation-director

Example

<animation-director data-threshold="-50%"></animation-director>

data-ids

data-ids takes a comma separated list of ids of elements to keep track of, when any of them come into the viewport, they will update the data-scene with whichever index they are in data-ids.

data-thresholds

data-thresholds is like data-threshold above, but for the elements refered to in data-ids

Example

<animation-director ids="bob,craw" data-thresholds="-50%"></animation-director>

data-rootMargins

data-rootmargins is like data-rootmargin above, but for the elements refered to in data-ids

Example

<animation-director ids="bob,craw" data-rootmargins="-50%"></animation-director>

Attributes: css hooks used for styling

data-on-screen

data-on-screen will be added and removed when element is on or off screen.

Example

<animation-director data-on-screen="true"></animation-director>

This means that this animation director is currently on screen.

data-scene

data-scene will tell you the index of the ids that are on screen currently

Example

<animation-director data-ids="bob,craw,fish" data-scene="2">

This means that an element with the id of fish, is currently on screen.

data-passed

When data-passed is present that means that the animation director has passed through the viewport at somempoint

Example

<animation-director data-passed=""></animation-director>

data-passed-{i}

When data-passed-{i} is present that means that the element with that index in the data-ids, has passed through the viewport

Example

<animation-director data-ids="bob,craw,fish" data-passed-1 data-passed-2></animation-director>

This means that the element with the id of bob and craw has passed through the viewport at some point.

Built with StencilJS