Toggle Menu
Toolbly
Home
Tools
Blog
About
Contact
Privacy
Terms
Toggle theme
Home
Web Tools
On Scroll Animation Generator
On-Scroll Animation Generator
Generate code for animations that trigger as you scroll.
1. Choose Animation
2. Add HTML Class
<div class="animate-on-scroll">...</div>
3. Add CSS
.animate-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; } .animate-on-scroll.is-visible { opacity: 1; transform: none; }
4. Add JavaScript
document.addEventListener("DOMContentLoaded", function() { const animatedElements = document.querySelectorAll('.animate-on-scroll'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('is-visible'); observer.unobserve(entry.target); } }); }, { threshold: 0.1 // Trigger when 10% of the element is visible }); animatedElements.forEach(element => { observer.observe(element); }); });
Live Preview
Scroll Down
↓
Item 1
Item 2
Item 3
Item 4