IntersectionTrigger

IntersectionTrigger utilizes the most modern web technology to trigger anything by intersection. Including scroll-based animations.

Installation

From NPM

npm i intersectiontrigger

From Yarn

yarn add intersectiontrigger

And import it

//import IntersectionTrigger
import IntersectionTrigger from 'intersectiontrigger';

//init intersectiontrigger
const itInstance = new IntersectionTrigger(...);

By default  IntersectionTrigger exports only the core version without any Plugins, so if you want to use any you need to import it too. After importing any plugin, you must register it.

import IntersectionTrigger, { Animation, ToggleClass } from 'intersectiontrigger';

//Register plugins right after importing them
IntersectionTrigger.registerPlugins([Animation, ToggleClass]);

If you want to import IntersectionTrigger with all plugins registered, then you should import it from 'intersectiontrigger/bundle':

//import IntersectionTrigger with all plugins registered
import IntersectionTrigger from 'intersectiontrigger/bundle';

//init IntersectionTrigger
const itInstance = new IntersectionTrigger(...);

For more installation options.

Features

• Resolution of the "Target Height is greater than the Root Height" Issue: IntersectionTrigger offers a solution to the IntersectionObserver problem where the target height exceeds that of the root.
• Boosted Performance: IntersectionTrigger developed with reaching the highest performance in mind, starting with the observation algorithm eliminating any scroll events, resize recalculations getting throttled, the ability of one IntersectionTrigger instance to observe and control unlimited number of triggers (theoretically) and ending with the package's size getting decreased by plugins interface coming as a solution.
• Controlled Animations: Control any animation by assigning it to a particular element (trigger), so you can perform actions on that animation like (play,pause,resume,reverse,complete,restart,reset,kill) when entering/leaving a specific area.
• Linked Animations: Link any animation to the scrollbar, so that the scrollbar acts like a timeline controller and by adding a link factor you can smooth the linked animation.
• Snapping System: Define certain points to snap in the linked animation like closest mark on the timeline or an array of custom points.
• Library Agnostic: IntersectionTrigger requires Zero JavaScript libraries, which makes it much smaller and faster.
• Unlimited Triggers With Unlimited Animations: Add as many triggers ( with controlled/linked animations ) as you want to one IntersectionTrigger instance, so you can use only one instance to power up your whole application.
• Visual Guides: IntersectionTrigger comes with Guides Plugin to visualize the enter/leave positions of both the trigger and the root, makes the development process much easier for debugging.
• Want to discover more, visit us ...

Community

The IntersectionTrigger community can be found on GitHub Discussions, where you can ask questions, voice ideas, and share your projects

Major Roadmapped Features

• Top Feature Requests (Add your own votes using the 👍 reaction)
• Top Bugs 😱 (Add your own votes using the 👍 reaction)