Text Animation
The <pines-text-animation> component applies an entrance animation to its child text content when it first appears in the viewport. Use it on headings, taglines, or hero text to create a polished first impression — particularly effective on landing pages, section introductions, or any text that anchors a visual layout.
Properties
| Attribute | Type | Default | Description |
animation-type
|
PinesTextAnimationTypeEnum
|
FadeIn
|
Selects the entrance animation style applied to the child content. Choose the animation that complements the surrounding layout and desired visual tone. |
PinesTextAnimationTypeEnum Values
| Value | Description |
Scale
|
The text scales up from a smaller size into its full size. Use for bold, punchy headings where you want the text to feel like it's arriving with emphasis. |
SlideUp
|
The text slides up into position from below. Use for a clean, modern entrance that suggests upward momentum — well-suited to taglines and feature callouts. |
FadeIn
|
The text fades in from transparent to fully visible. The most subtle option — use when you want a smooth, unobtrusive entrance that doesn't distract from surrounding content. |