Scroll Animation Delay
User
Display tiles and objects with a slight delay when scrolling.Of a section html js
Assistant
To display tiles or objects with a slight delay as you scroll into a section, you can use **Intersection Observer** with JavaScript along with a bit of CSS animation. Here's a minimal working example:
—
### ✅ HTML
<section class="tile-section">
<div class="tile">Tile 1</div>
<div class="tile">Tile 2</div>
<div class="tile">Tile 3</div>
<div class="tile">Tile 4</div>
</section>—
### ✅ CSS
.tile-section {
padding: 100px 20px;
}
.tile {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
margin-bottom: 20px;
}
.tile.show {
opacity: 1;
transform: translateY(0);
}—
### ✅ JavaScript
<script>
const tiles = document.querySelectorAll('.tile');
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry, index) => {
if (entry.isIntersecting) {
setTimeout(() => {
entry.target.classList.add('show');
}, index * 150); // delay each tile by 150ms
observer.unobserve(entry.target); // animate only once
}
});
}, {
threshold: 0.1,
});
tiles.forEach(tile => {
observer.observe(tile);
});
</script>—
### 🔥 What it does:
– When the tiles scroll into view, they **fade and slide in with a delay**, creating a staggered animation effect.
– The delay increases with each tile due to `index * 150`.
Want to animate from left/right or control it based on screen size or scroll speed? I can help with that too.