https://github.com/voloshchenkoal/morphing-pointer
Morphing pointer in iPadOS style
https://github.com/voloshchenkoal/morphing-pointer
animation cursor gsap ipados typescript
Last synced: 6 months ago
JSON representation
Morphing pointer in iPadOS style
- Host: GitHub
- URL: https://github.com/voloshchenkoal/morphing-pointer
- Owner: VoloshchenkoAl
- License: mit
- Created: 2020-10-22T21:46:21.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-03-24T14:15:38.000Z (over 2 years ago)
- Last Synced: 2025-04-10T01:56:21.544Z (6 months ago)
- Topics: animation, cursor, gsap, ipados, typescript
- Language: TypeScript
- Homepage: https://voloshchenkoal.github.io/morphing-pointer/
- Size: 1.46 MB
- Stars: 24
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: License.md
Awesome Lists containing this project
README
# Morphing pointer (experimental project)
This is a custom pointer in iPadOS style
## Installation
Install with npm:
```js
npm install --save morphing-pointer
```
## Example of use
Init Morphing Pointer in your app
```js
import { initMorphingPointer } from 'circular-revealer';
initMorphingPointer();
```
And use different triggers in html to add different types of animation
| animation type | data attr |
| -------------- | ----------------------------- |
| highlight | data-pointer-type="highlight" |
| lift | data-pointer-type="lift" |
| content | data-pointer-type="content" |
```html
Button
Another button
text
```
---
Inspired by [Pointers (iPadOS)](https://developer.apple.com/design/human-interface-guidelines/ios/user-interaction/pointers/)