SAT TESTER

Scroll Animation Tool - Class Version

SAT.css Loaded 60 Animations Ready

๐ŸŽ›๏ธ Control Panel

๐Ÿงช Animation Tests

๐ŸŽญ Fade Animations

โฌ†๏ธ Fade Up
class="sat-fade-up"
โฌ‡๏ธ Fade Down
class="sat-fade-down"
โฌ…๏ธ Fade Left
class="sat-fade-left"
โžก๏ธ Fade Right
class="sat-fade-right"
โ†–๏ธ Fade Up-Left
class="sat-fade-up-left"
โ†—๏ธ Fade Up-Right
class="sat-fade-up-right"
โ†™๏ธ Fade Down-Left
class="sat-fade-down-left"
โ†˜๏ธ Fade Down-Right
class="sat-fade-down-right"

๐Ÿ” Zoom Animations

๐Ÿ”Ž Zoom In
class="sat-zoom-in"
๐Ÿ” Zoom Out
class="sat-zoom-out"
๐Ÿ”Žโฌ†๏ธ Zoom In Up
class="sat-zoom-in-up"
๐Ÿ”Žโฌ‡๏ธ Zoom In Down
class="sat-zoom-in-down"
๐Ÿ”Žโฌ…๏ธ Zoom In Left
class="sat-zoom-in-left"
๐Ÿ”Žโžก๏ธ Zoom In Right
class="sat-zoom-in-right"
๐Ÿ”โฌ†๏ธ Zoom Out Up
class="sat-zoom-out-up"
๐Ÿ”โฌ‡๏ธ Zoom Out Down
class="sat-zoom-out-down"
๐Ÿ”โฌ…๏ธ Zoom Out Left
class="sat-zoom-out-left"
๐Ÿ”โžก๏ธ Zoom Out Right
class="sat-zoom-out-right"

โžก๏ธ Slide Animations

โฌ†๏ธ Slide Up
class="sat-slide-up"
โฌ‡๏ธ Slide Down
class="sat-slide-down"
โฌ…๏ธ Slide Left
class="sat-slide-left"
โžก๏ธ Slide Right
class="sat-slide-right"

๐Ÿ”„ Flip Animations

๐Ÿ”„ Flip Left
class="sat-flip-left"
๐Ÿ”„ Flip Right
class="sat-flip-right"
๐Ÿ”„ Flip Up
class="sat-flip-up"
๐Ÿ”„ Flip Down
class="sat-flip-down"

โฑ๏ธ Duration Test

โšก Fast (300ms)
sat-duration-300
๐ŸŒ Slow (1000ms)
sat-duration-1000
๐Ÿข Very Slow (2000ms)
sat-duration-2000

โฐ Delay Test

0ms Delay
sat-delay-0
500ms Delay
sat-delay-500
1000ms Delay
sat-delay-1000
1500ms Delay
sat-delay-1500
2000ms Delay
sat-delay-2000
2500ms Delay
sat-delay-2500
3000ms Delay
sat-delay-3000

๐Ÿ“ˆ Easing Functions Lengkap

๐Ÿ“ Linear
sat-easing-linear
๐Ÿ“Š Ease
sat-easing-ease
๐Ÿ“ˆ Ease In
sat-easing-ease-in
๐Ÿ“‰ Ease Out
sat-easing-ease-out
๐Ÿ“Š Ease In-Out
sat-easing-ease-in-out
๐ŸŽข Ease In Back
sat-easing-ease-in-back
๐ŸŽข Ease Out Back
sat-easing-ease-out-back
๐ŸŽข Ease In-Out Back
sat-easing-ease-in-out-back
๐Ÿ“ˆ Ease In Sine
sat-easing-ease-in-sine
๐Ÿ“‰ Ease Out Sine
sat-easing-ease-out-sine
๐Ÿ“Š Ease In-Out Sine
sat-easing-ease-in-out-sine
๐Ÿ“ˆ Ease In Quad
sat-easing-ease-in-quad
๐Ÿ“‰ Ease Out Quad
sat-easing-ease-out-quad
๐Ÿ“Š Ease In-Out Quad
sat-easing-ease-in-out-quad
๐Ÿ“ˆ Ease In Cubic
sat-easing-ease-in-cubic
๐Ÿ“‰ Ease Out Cubic
sat-easing-ease-out-cubic
๐Ÿ“Š Ease In-Out Cubic
sat-easing-ease-in-out-cubic
๐Ÿ“ˆ Ease In Quart
sat-easing-ease-in-quart
๐Ÿ“‰ Ease Out Quart
sat-easing-ease-out-quart
๐Ÿ“Š Ease In-Out Quart
sat-easing-ease-in-out-quart

๐ŸŽฏ Combination Test

๐Ÿ”Žโฌ†๏ธ Zoom + Fade
Multiple Classes
๐Ÿ”„ Flip + Delay
Flip with 400ms delay

โšก Performance Test

โšก Optimized
sat-optimize (will-change)
๐Ÿ“ฑ Mobile Disabled
sat-mobile-disable

๐ŸŒ€ Blur Animations

๐ŸŒ€ Simple Blur
class="sat-blur"
๐ŸŒ€โฌ†๏ธ Blur Up
class="sat-blur-up"
๐ŸŒ€โฌ‡๏ธ Blur Down
class="sat-blur-down"
๐ŸŒ€โฌ…๏ธ Blur Left
class="sat-blur-left"
๐ŸŒ€โžก๏ธ Blur Right
class="sat-blur-right"
๐ŸŒ€๐Ÿ”Ž Blur Zoom In
class="sat-blur-zoom-in"
๐ŸŒ€๐Ÿ” Blur Zoom Out
class="sat-blur-zoom-out"
๐Ÿฅƒ Glass Blur
class="sat-blur-glass"
(