https://github.com/jj811208/watching-you

watching-you is a javascript library for building animations that watch anything on DOM 👀.
https://github.com/jj811208/watching-you

animation dom frontend javascript javascript-library open-source react storybook typescript vanilla-js vue web xeyes

Last synced: 27 days ago
JSON representation

watching-you is a javascript library for building animations that watch anything on DOM 👀.

• Host: GitHub
• URL: https://github.com/jj811208/watching-you
• Owner: jj811208
• License: isc
• Created: 2022-09-09T18:35:59.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-09-27T18:27:39.000Z (about 1 month ago)
• Last Synced: 2024-09-29T22:41:46.004Z (about 1 month ago)
• Topics: animation, dom, frontend, javascript, javascript-library, open-source, react, storybook, typescript, vanilla-js, vue, web, xeyes
• Language: TypeScript
• Homepage: https://jj811208.github.io/watching-you
• Size: 10.2 MB
• Stars: 1,589
• Watchers: 9
• Forks: 49
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        


  





  

  

  

  

  





  

  



## Features

- Be able to watch the mouse or another DOM, or even input values, watch anything you want!

- Because it is DOM-based, it is easy to support RWD

- Supports multiple frameworks

- Zero dependency (every framework is!)

- Written in typescript

- The size of the core code is only 3kb after gzip compression

- If the element is not on the screen, it will automatically stop watching

## Example

- Login Form

- Iron Chain

- Cena is watching you

- Svg Path Watcher

The source code can be found here

## Storybook

watching-you's storybook using react, but every framework can do the same thing!

https://jj811208.github.io/watching-you/storybook

## Documents

⚠️ The API is still subject to change until version 1.0.0 is released ⚠️

- [Vanilla.js](https://github.com/jj811208/watching-you/tree/main/packages/core)

- [React](https://github.com/jj811208/watching-you/tree/main/packages/react)

- [Vue](https://github.com/jj811208/watching-you/tree/main/packages/vue)

## Compatibility

If you use `watching-you` directly without any compiler(babel), (e.g. Wordpress project using [CDN](https://cdn.jsdelivr.net/npm/watching-you/dist/watching-you.umd.cjs) import `watching-you`)

|           | Chrome | Firefox | Safari | Edge | Opera | iOS Safari/Chrome | Android Chrome |

|-----------|--------|---------|--------|------|-------|-------------------|----------------|

| Supported |   70+  |   73+   |  14.1+ |  80+ |  70+  |        14.1+      |        ✔       |

But if you use a compiler like babel and import polyfill, it can even support IE11

Some references: 


https://babeljs.io/ 


https://github.com/vitejs/vite/tree/main/packages/plugin-legacy

## Note

- When watching `input` or `textarea`, the `text-align` attribute must be `left`

- Some inline elements ignore the `transform` attribute (let's say `span`), so you have to give them the `display` attribute to work properly. (see: https://stackoverflow.com/questions/24961795/how-can-i-use-css3-transform-on-a-span)

- You may need something like `transition: transform .1s` depending on your needs

## License

[ISC](https://github.com/jj811208/watching-you/blob/main/LICENSE.md)