Viewport

The Viewport class is a controller that provides information on the position of the element within the window. It does this through a combination of IntersectionObserver and request animation frame.

This class extends the element controller and requires registration with the Execute controllers system in order to be instanciated as a component (ie with )

Viewport

| Param | Type | Description | | --- | --- | --- | | element | HTMLElement | The element to use | | settings | object | A settings object that allows settings to be passed to the raw class. These settings are:

• vpprefix The prefix for the classnames
• vpstoptopthreshold The threshold to stop the execution of at
• animationCallback The function to run on animation. Takes the same three parameters as the runAnimation method |

Returns void

The Viewport Class constructor

scrollPos

(getter/setter) Scroll position. This updates the scroll position only if it's changed and then calculated the element's top position based on that.

top

(getter/setter) Top position. This updates the element's top position in pixels only if the value has changed and then calculates the 3 positional percentages - top, middle and bottom and then runs the runAnimation method to perform actions based on these numbers.

playing

(getter/setter) Playing. This is set in response to a callback on the intersection observer and sets up the RaF loop to calculate the scroll position and run the animation.

windowHeight

(getter/setter) The window height. Used to calculate the positional percentages.

elementHeight

Element height. Returns The element's height in pixels.

isOnScreen

(getter/setter) Sets whether the element is onscreen. This is set from the intersection observer callback and updates the classes of the element for use.

classes

The array of classes to remove from the element on scroll.

Returns The classes to remove each time the animation loop is run.

classPrefix

(getter/setter) Sets the prefix for the css classes for the element. Setting this will also set the class list.

animationCallback

(getter/setter) Sets the animation callback for custom behaviour. this function will be called each time the runAnimation function is called. Any provide function will be bound to this instance and takes three params:

• topPercent;
• middlePercent; and
• bottomPercent

runAnimation()

| Param | Type | Description | | --- | --- | --- | | topPercent | number | The percentage distance between the top of the element and the bottom of the screen. | | middlePercent | number | The percentage distance between the middle of the element and the bottom of the screen. | | bottomPercent | number | The percentage distance between the bottom of the element and the top of the screen. |

Returns void

This method is called from the run loop and updates the classes based on the percentages provided to it. This is a public method and so can be called programatically, but the use-cases for doing so are limited.