useFadeElement

A hook for creating fade in/out transitions on DOM elements.

Installation

This hook is included when you install the video-loop component:

Usage

Parameters

Parameter	Type	Required	Default	Description
`elementRef`	`RefObject<HTMLElement>`	Yes	-	Ref to the element to fade
`duration`	`number`	No	`300`	Fade duration in milliseconds
`onTransitionComplete`	`() => void \| Promise<void>`	No	-	Callback executed during fade transition

Return Value

Property	Type	Description
`fadeIn`	`() => void`	Function to fade in the element (opacity 0 → 1)
`fadeOut`	`() => void`	Function to fade out the element (opacity 1 → 0)
`fadeTransition`	`() => void`	Function to fade out, execute callback, then fade in

How It Works

The hook manages opacity state and applies CSS transitions to the element
fadeIn() sets opacity to 1
fadeOut() sets opacity to 0
fadeTransition() performs a complete fade cycle:
- Fades out (opacity → 0)
- Waits for the duration
- Executes the onTransitionComplete callback
- Fades back in (opacity → 1)
The element automatically fades in when the hook initializes

Example with Content Swap

Example with Image Gallery

Notes

The element's transition CSS property is automatically managed
The element fades in automatically when the component mounts
Transitions use CSS opacity changes for smooth performance
The callback in fadeTransition can be async