Intersy.js

A simple, lightweight library of CSS effects that are triggered when element enters the viewport as the user scrolls the page.

Intersy useses Intersection and Mutation Observers. It automatically adds "in-view" class to each element with "intersy" class currently present in viewport.

It works well with "reactive" frameworks where the content is loaded dynamically (Vue, React, LiveWire etc.).

See project on GitHub.

Usage:

Include Intersy script anywhere in your HTML:

<script src="https://cdn.jsdelivr.net/gh/pronode/intersy@main/intersy.js"></script>

Add CSS with pre-defined effects:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/pronode/intersy@main/intersy.css" />

Add one ore more Intersy classes to the element you want to animate:

<div class="intersy fade-in"> yey! </div>

That's it!

Extra:

You can add "fast" and "slow" classes to control the speed of transition: 250 / 500 (default) / 750 ms.
Add "once" class to prevent repeats.
Use "delay-[ms]" (250/500/750/1000) class to delay transition by X ms.
Use "threshold-[percent]" (10/50/75/100) class to define what part of element should be in viewport to trigger the effect. 25% is default.
To add your own effects, simply keep following convention: .my-custom-effect { /* when element is out of view */ opacity: 0; } .my-custom-effect.in-view { /* when element is in view */ opacity: 1; }
You can combine Intersy classes to mix effects. Enjoy!

Effects (classes):

fade-in

fade-in slow

fade-in slow delay-250

appear-from-left

appear-from-right

appear-from-top

appear-from-bottom

stretch-left fade-in

stretch-right once

stretch-top

stretch-bottom fade-in

rotate-y fade-in

rotate-x fade-in

shrink fade-in

grow

grow fade-in

bounce

pulse

slide-from-left

slide-from-right

slide-from-top fade-in

slide-from-bottom fade-in

slide-left-then-grow

slide-right-then-grow

book-page fade-in

Define your own! :)