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

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

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

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

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

windowHeight

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

elementHeight

elementHeight

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

isOnScreen

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

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

classPrefix

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

animationCallback

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()

runAnimation(topPercent, middlePercent, bottomPercent)

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.