Introduction Foundations Components Patterns Directives Pipes Motion Brand
Animate on scroll Auto grow Control value accessor Hide Long press Repeat Tagging Visibility

Animate on scroll

Animates specific elements once it is visible in the view.

Contents

Default Reset
Fade (default)
Fade in from LEFT
Fade in from RIGHT
Fade in from BOTTOM
Fade in from TOP
Fade + ZOOM in
Inputs
flAnimateOnScroll ?: boolean = true
flAnimateOnScrollBehavior ?: AnimationBehavior = AnimationBehavior.FADE
flAnimateOnScrollClass ?: string = 'IsVisible'

Class name to add as a CSS hook

flAnimateOnScrollDelay ?: number = 0.2

Defines how long before the animation will play in seconds

flAnimateOnScrollDistance ?: number = 0.2

Defines how far the animation will start from. This gets converted to percentage for FADE_FROM_* animation behavior

flAnimateOnScrollDuration ?: number = 0.5

Defines how long the animation will play in seconds

flAnimateOnScrollReset ?: boolean = false

Whether elements should animate out when scrolling past them