A javascript library for building animations that watch anything on DOM

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
• React
• Vue

Compatibility

If you use watching-you directly without any compiler(babel), (e.g. WordPress project using CDN import watching-you)

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

GitHub

View Github