PHPackages                             zephni/trigger-on-view-js - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. zephni/trigger-on-view-js

ActiveLibrary

zephni/trigger-on-view-js
=========================

Set a trigger and a reaction for any element. Allowing them to animate in to/out of view or as the page scrolls with CSS animations or customised functions. Requires JQuery.

1.0.15(4y ago)07MITJavaScript

Since Aug 16Pushed 4y ago1 watchersCompare

[ Source](https://github.com/Zephni/TriggerOnViewJS)[ Packagist](https://packagist.org/packages/zephni/trigger-on-view-js)[ RSS](/packages/zephni-trigger-on-view-js/feed)WikiDiscussions trigger-on-view-js-jquery Synced 1mo ago

READMEChangelogDependenciesVersions (9)Used By (0)

TriggerOnViewJS (requires jquery)
=================================

[](#triggeronviewjs-requires-jquery)

What is TriggerOnViewJS?
------------------------

[](#what-is-triggeronviewjs)

Simply put, `triggerOnView` is a Javascript/JQuery extended method that sets a trigger and a reaction for any element.

The most common usage is likely to be to animate these elements 'in to' or 'out of' view or as the page scrolls with CSS animations or customised functions.

Requirements
------------

[](#requirements)

Only JQuery is required.

How to install and use
----------------------

[](#how-to-install-and-use)

There are two ways you may wish to install TriggerOnViewJS:

### Installing

[](#installing)

#### 1. Make sure JQuery is installed

[](#1-make-sure-jquery-is-installed)

`composer require components/jquery`

Include `` within your `` tags

or prehaps using a CDN:

``

#### 2. Getting TriggerOnViewJS

[](#2-getting-triggeronviewjs)

##### Option 1: Using composer

[](#option-1-using-composer)

`composer require zephni/trigger-on-view-js 1.0.15`

Note that 1.0.15 is the last version that uses jQuery, anything 1.1.0 or above uses vanilla Javascript

##### Option 2: Manual install

[](#option-2-manual-install)

Download `triggeronview.js` from this repository and place wherever you keep JS files in your project.

#### 3. Include the script into your page (Source depends on where it was installed)

[](#3-include-the-script-into-your-page-source-depends-on-where-it-was-installed)

Place this somewhere after JQuery

``

### Basic example of usage

[](#basic-example-of-usage)

This is the most basic version, it sets the given element as both the trigger and the element to animate:

```
$('#elementToAnimate').triggerOnView({
  default: {left: -100, opacity: 0},
  in: {left: 0, opacity: 1},
});
```

Note that we have set the `default` and `in` options. Everything within default will be ran straight away and set without any animation. The `in` option will set the animation once the trigger element comes into view. By default if you do not include an `out` option, `default` will be used to animate back from once the trigger element is out of view.

If you wish to have a different trigger element you can do this two ways:

```
$('#trigger').triggerOnView({
  element: $('#element'),
  ...
});
```

Or you can target the elements the other way around:

```
$('#element').triggerOnView({
  triggger: $('#trigger'),
  ...
});
```

`triggerOnView` can be assigned to multiple elements at once, eg. using a class. By default each one will use itself as both the trigger and element but either of these can be overriden across all as above.

```
$('.class').triggerOnView({
  ...
});
```

Commonly you may have a single trigger, but multiple elements within that need to animate at the same time, to do this it makes sense to use the trigger element primarily, and pass an array of options that set the element for each one. Once again this can be done the other way around if needed:

```
$('#trigger').triggerOnView([
  {
    element: $('#exampleItem1'),
    default: {left: -100, opacity: 0},
    in: {left: 0, opacity: 1},
  },
  {
    element: $('#exampleItem2'),
    default: {left: 100, opacity: 0},
    in: {left: 0, opacity: 1},
  }
]);
```

Note that by default the `'relative'` position is applied to all elements. To disable this pass `defaultPosition: false`.

### The options object

[](#the-options-object)

#### List of available options and defaults:

[](#list-of-available-options-and-defaults)

```
triggerOffset: 50,
time: 1,
delay: 0,
inDelay: false,
outDelay: false,
element: $(this),
trigger: $(this),
easing: 'swing',
defaultPosition: 'relative',
default:{opacity: 0},
in:{opacity: 1},
out: null,
callbackPreIn: function(){},
callbackPreOut: function(){},
callbackPostIn: function(){},
callbackPostOut: function(){}
```

#### Options explained

[](#options-explained)

OptionDescription`triggerOffset`*sets a distance offset before triggering an event. In other words you may want to have part or all of the element fully in view before applying the annimation.*`time`*the number of seconds to animate for. This can take decimals eg. 1.2 or 2.5.*`delay`*the number of seconds to delay before triggering on both the in and out event. Can take decimals eg. 1.2 or 2.5.*`inDelay`*the number of seconds to delay before triggering on the in event, this will override the in value set by 'delay'. Can take decimals eg. 1.2 or 2.5.*`outDelay`*the number of seconds to delay before triggering on the out event, this will override the in value set by 'delay'. Can take decimals eg. 1.2 or 2.5.*`element`*The element to run animation events on*`trigger`*The trigger element that will run the animation on the target element once in view*`easing`*This can accept any available JQuery animate easing type, see *`defaultPosition`*In most cases a relative position will be required for the element so it can respond to directional positioning values but this can be changed if needed. This can accept any CSS position value.*`default`*The default CSS to apply to the target element, this will be ran straight away and also be used as the out animation if `out` is not false.*`in`*The CSS to animate once the `in` trigger has been called*`out`*The CSS to animate once the `out` trigger has been called. Set to false to prevent out animation*`callbackPreIn`*A callback function to be called as soon as the `in` trigger begins*`callbackPreOut`*A callback function to be called as soon as the `out` trigger begins*`callbackPostIn`*A callback function to be called as soon as the `in` trigger animation has ended*`callbackPostOut`*A callback function to be called as soon as the `out` trigger animation has ended*### Whats next?

[](#whats-next)

I am just using this for myself so if I need to update it I will. But if you have any suggestions feel free to contact me.

Example page:

###  Health Score

24

—

LowBetter than 32% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity4

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity56

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~5 days

Total

7

Last Release

1701d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/ac44e70f25768030854ad52b209db888cfeab8650ef4f812ae078092c51ef826?d=identicon)[Zephni](/maintainers/Zephni)

---

Top Contributors

[![Zephni](https://avatars.githubusercontent.com/u/4312475?v=4)](https://github.com/Zephni "Zephni (15 commits)")

### Embed Badge

![Health badge](/badges/zephni-trigger-on-view-js/health.svg)

```
[![Health](https://phpackages.com/badges/zephni-trigger-on-view-js/health.svg)](https://phpackages.com/packages/zephni-trigger-on-view-js)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)