Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/scaccogatto/vue-waypoint

trigger functions and events based on the element position on the screen
https://github.com/scaccogatto/vue-waypoint

intersectionobserver triggers vue vue3

Last synced: about 1 month ago
JSON representation

trigger functions and events based on the element position on the screen

Lists

README 

        
# VueWaypoint



> trigger functions and events based on the element position on the screen



![Latest Release](https://github.com/scaccogatto/vue-waypoint/workflows/Release/badge.svg)



## Demo



[Simple demo page](https://vue-waypoint.netlify.app/)



Open your browser console and see what's going on while scrolling up and down



## Features



- [x] Vue 3

- [x] No dependencies

- [x] Flexible

- [x] Typescript

- [x] Battle tested

- [x] Customizable

- [x] Solid project (5+ years)

- [x] Supports slots



## Getting started



### npm



```bash

npm i vue-waypoint

```



### Vue component



```html



  

    

  



```



```html



  import { defineComponent } from "vue";

  import { Waypoint } from "vue-waypoint";



  export default defineComponent({

    name: "SomeComponent",

    components: {

      Waypoint,

    },

    setup() {

      const onChange = (waypointState) => {

        // Going can be:

        // IN

        // OUT

        console.log(waypointState.going);



        // Direction can be:

        // UP

        // DOWN

        // LEFT

        // RIGHT

        console.log(waypointState.direction);

      };



      return { onChange };

    },

  });



```



## Props



### `active`



- [x] Can use a reactive variable

- [x] Can set `true`/`false` dynamically



Usage:



- Enable the waypoint: ``

- Disable the waypoint: ``



### `options`



- [x] Useful for inner div detection

- [x] Trigger `change` event a portion of the element is completely on screen

- [x] Is an [official IntersectionObserverInit implementation](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver)



Usage:



- Set a custom `IntersectionObserver` options: ``

- Read what you can do with `options`: [IntersectionObserverInit docs](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver)



Options example:



```js

const options: IntersectionObserverInit = {

  root: document,

  rootMargin: "0px 0px 0px 0px",

  threshold: [0.25, 0.75],

};

```



### `tag`



- [x] Set your preferred tag for the element

- [x] Defaults to `div`



- Waypoint as div: ` --> renders --> 
`

- Waypoint as span: ` --> renders --> `

- Waypoint as p: ` --> renders --> 
`



### `disableCssHelpers`



- [x] Disable automatic CSS classes on the Waypoint component

- [x] Defaults to `false`



Usage:



- Enable helpers (default): ``

- Disable helpers: ``



DOM result:



- With CSS helpers: ` --> renders --> 
`

- Without CSS helpers: ` --> renders --> 
`



## CSS helpers



- [x] Zero configuration needed

- [x] Useful for simple CSS animations



The component comes with three classes:



- `waypoint`: set when the waypoint is ready

- `going-in`, `going-out`: dynamically changed when the waypoint comes in and out

- `direction-up`, `direction-down`, `direction-left`, `direction-right`: dynamically changed when the direction changes



Examples:



- `` - the element is visible and came from bottom and is going top (natural scroll)

- `` - the element is visible and came from top and is going up (reverse natural scroll)

- `` - the element is not visible and came from bottom and is going top

- `` - the element is not visible and came from top and is going up



## Events



### `change`



Emitted every time the waypoint detects a change.



```html



  



```



```js

function onChange(waypointState) {

  /* ... */

}

```



```js

interface WaypointState {

  el: Element;

  going: "IN" | "OUT";

  direction: "UP" | "DOWN" | "LEFT" | "RIGHT";

}

```



## Development



1. Fork the repository

2. Run the project (`npm i && npm run dev`)

3. Follow [Conventional Commits spec](https://www.conventionalcommits.org/en/v1.0.0/) for your commits

4. Open a pull request



## LEGACY: Vue2 and Nuxt version



[vue-waypoint for Vue2 repository](https://github.com/scaccogatto/vue-waypoint/tree/vue2)