hofa v1.0.45

HOFA

Intersection observer for starting animations, etc.

Installation

npm i hofa

Usage

Import

import hofa from 'hofa'

Observe

hofa.observer.observe('section-2', document.getElementById('section-2'), { callback: (t) => console.log(t), loop: true })

Arguments

1. just name
2. an element to watch for
3. settings

Settings

• callback - a function to invoke
• wait - invoke function only once(waiting for next intersection)
• once - stop observing an element after intersection happened and an element went out of view
• loop - put function in the requestAnimationFrame (wait option automatically included)
• start - start intersection offset. Value "1" mean innerHeight, value "0.5" mean half innerHeight, etc.
• end - end intersection offset. Value "1" mean innerHeight, value "0.5" mean half innerHeight, etc.

Stop watching

hofa.observer.unobserve('section-2')

Loop

Put function in the requestAnimationFrame

hofa.loop.add('draw squares', callback) // requestAnimationFrame starts automatically

Remove function from the requestAnimationFrame

hofa.loop.remove('draw squares') // requestAnimationFrame stops automatically when there is no callbacks

Manual start

hofa.loop.start()

Manual stop

hofa.loop.stop()