https://github.com/zhangyu1818/theme-bg
React and vanilla background circular transition animation.
https://github.com/zhangyu1818/theme-bg
animation react transition
Last synced: 3 months ago
JSON representation
React and vanilla background circular transition animation.
- Host: GitHub
- URL: https://github.com/zhangyu1818/theme-bg
- Owner: zhangyu1818
- License: mit
- Created: 2023-07-05T10:05:48.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-05T10:10:46.000Z (almost 2 years ago)
- Last Synced: 2025-03-01T23:48:56.315Z (4 months ago)
- Topics: animation, react, transition
- Language: TypeScript
- Homepage: https://zhangyu1818.github.io/theme-bg/
- Size: 87.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# theme-bg
React and vanilla background circular transition animation.
[demo](https://zhangyu1818.github.io/theme-bg/)
## install
```shell
npm i theme-bg
```
## React usage
```tsx
function App() {
const ref = useRef(null)
return (
Start Transition
)
}
```
```ts
interface CircleTransitionProps
extends React.CanvasHTMLAttributes {
center?: boolean
trigger: string | React.RefObject
options: Options
}
interface TransitionOptions {
background: string
foreground: string
}
type Options = TransitionOptions & (Bezier | Spring)
```
**center**: Whether to start transition from the center of the triggering element
**trigger**: The element that triggers the transition, if it is a string, querySelector will be called.
**options**: Color and animation settings.
## Vanilla usage
```ts
const transition = createTransition(canvas, options)
await transition.startTransition(x, y, 'forwards')
await transition.startTransition(x, y, 'backwards')
transition.stopTransition()
```
## License
[MIT](https://github.com/zhangyu1818/theme-bg/blob/main/LICENSE)