Basic Usage
Simple Fade Up
This card fades up from the bottom with default settings.
Delayed Fade Left
This card fades in from the left with a 200ms delay.
Speed Variations
Fast (400ms)
Quick animation
Normal (600ms)
Standard animation
Slow (1000ms)
Leisurely animation
Animation Effects
Fade
Simple opacity fade without movement
FadeUp
Fade with upward slide movement
FadeDown
Fade with downward slide movement
FadeLeft
Fade with leftward slide movement
FadeRight
Fade with rightward slide movement
SlideUp
Slide up without opacity change
SlideLeft
Slide left without opacity change
SlideRight
Slide right without opacity change
ZoomIn
Scale up with fade effect
ZoomOut
Scale down with fade effect
Easing Functions
Bounce
Bouncy animation effect
Elastic
Elastic spring effect
Ease In-Out
Slow start and end
Linear
Constant speed
Staggered Animation Pattern
Card 7
FadeLeft with 100 ms delay
Card 7
FadeUp with 200 ms delay
Card 7
FadeRight with 300 ms delay
Card 7
FadeLeft with 100 ms delay
Card 7
FadeUp with 200 ms delay
Card 7
FadeRight with 300 ms delay
Custom Parameters
Custom Animation
800ms duration, 50px distance, custom styling
Animate Once
Animation happens only once (AOS once parameter)
Welcome to Osirion.Blazor
A modular, high-performance component library powered by AOS.js
Feature List with Mixed Effects
High Performance
Optimized animations with GPU acceleration and minimal JavaScript footprint for smooth 60fps performance.
SSR Compatible
Works seamlessly across all Blazor hosting models including Static SSR, Server Interactive, and WebAssembly.
Mobile Friendly
Responsive animations that adapt to different screen sizes and respect user motion preferences.
Highly Customizable
Rich set of parameters and CSS variables for fine-tuning animations to match your design system.
Accessible by Default
Automatically respects prefers-reduced-motion and provides fallbacks for better accessibility.
Well Tested
Comprehensive unit tests ensure reliability and compatibility across different scenarios and environments.
AOS-Specific Features
Once Only
This animation happens only once when scrolled into view
Mirror Effect
This animation reverses when scrolling past
Custom Offset
Animation triggers 200px before the default point
Custom Anchor
Animation anchored to the hero section above