useVisible
Creates a Trigger which triggers when the referenced element enters or leaves the browser window.
page.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { useVisible } from '@infinityfx/lively/hooks';
export default function Page() {
const [ref, trigger] = useVisible({ enter: true });
return <Animatable animate={{ opacity: [0, 1] }} triggers={[{ on: trigger }]}>
<div ref={ref} style={{
width: 100,
height: 100,
borderRadius: 8,
backgroundColor: 'var(--f-clr-accent-100)'
}} />
</Animatable>;
}Call signature
1
const [ref, trigger] = useVisible<T extends Element = any>({ enter, exit, threshold })Parameters
enter?: boolean | number
On how many times the element becomes visible to call trigger. A value of false corresponds to 0 and a value of true to Infinity.
default = 1
default = 1
exit?: boolean | number
On how many times the element becomes invisible to call trigger. A value of false corresponds to 0 and a value of true to Infinity.
default = false
default = false
threshold?: number
The percentage, as a number between 0 and 1, of the element that needs to be visible or hidden for the trigger to activate.
default = 0.5
default = 0.5
Returns
trigger Trigger
A Trigger which can be used inside the triggers property to trigger an animation.