ScrollSmoother Refresh

Dynamically add or remove content and refresh ScrollTrigger to maintain smooth animations

Items: 4 | ScrollTrigger auto-refreshes on changes
Item 1

This is a dynamically added/removed item. ScrollTrigger refresh ensures animations work perfectly even when content changes.

1
Item 2

This is a dynamically added/removed item. ScrollTrigger refresh ensures animations work perfectly even when content changes.

2
Item 3

This is a dynamically added/removed item. ScrollTrigger refresh ensures animations work perfectly even when content changes.

3
Item 4

This is a dynamically added/removed item. ScrollTrigger refresh ensures animations work perfectly even when content changes.

4

Why Refresh Matters

ScrollTrigger.refresh() recalculates all ScrollTrigger positions and sizes when content changes dynamically.

This is essential when:

  • Adding or removing DOM elements
  • Changing element sizes or positions
  • Loading images or async content
  • Resizing the window
  • Toggling visibility of elements

In this demo, ScrollTrigger automatically refreshes when you add/remove items, ensuring animations always work correctly.

// Refresh ScrollTrigger after DOM changes
setTimeout(() => {
ScrollTrigger.refresh();
}, 100);