Fade Content
Fades its content in, optionally out of a blur, when it scrolls into view.
import { FadeContent } from "pleate/effects/fade-content";Fade and blur
Plain fade
Opacity only.
Out of a blur
Sharpens while it fades in.
Props
- blur
Start blurred and sharpen while fading in.
booleandefault false- duration
Seconds.
numberdefault 1- initialOpacity
Starting opacity.
numberdefault 0- delay
Seconds before it starts.
numberdefault 0- threshold
Share of the element visible before it plays (0 to 1).
numberdefault 0.15- once
Play once, or every time it enters.
booleandefault true
Accessibility
- Content is in the DOM from the start, so it is read normally.
- Reduced motion renders it in place.