Sal Studio
Scroll animations from Sal.js
Sal Studio — Scroll animations from Sal.js: fade, slide, zoom and flip on scroll, with live preview and copy-ready code.
How to use Sal Studio
- Pick an animation, duration, delay and easing in the controls.
- Scroll inside the orange preview stage to watch the cards animate in.
- Press Replay preview to reset the stage and watch the animation again.
- Add your own block with the custom title field and the Add block button.
- Copy the snippet or download it, then paste it into any web page.
Features
- All 12 real Sal.js animations: fade, slide, zoom and flip directions
- Live scroll preview powered by the real IntersectionObserver engine
- Duration from 200 to 2000 ms and delay from 5 to 1000 ms, as in Sal.js
- Sal.js easing names including ease-out-back and ease-out-expo
- Play once or repeat on every scroll pass, like data-sal-once and data-sal-repeat
- Copy-ready data-sal HTML snippet plus a downloadable snippet file
- Custom blocks you can add to the preview stage
- Runs fully in the browser with no dependencies and no sign-in
Frequently asked questions
Is it free?
Yes, unlimited.
Login to use this free online tool. Create a free account to get started.