Question 1

How to create a scroll progress bar with ScrollMagic?

Accepted Answer

Use the default 'contain' mode without an element to track overall scroll progress, then update a UI element's width or transform in the 'progress' event. For example, set a div's width to `event.target.progress * 100 + '%'` to visualize scroll completion.

Question 2

ScrollMagic vs GSAP ScrollTrigger: which is better for animations?

Accepted Answer

ScrollMagic is a lightweight tracking library ideal if you need custom control or are using other animation tools, while GSAP ScrollTrigger includes built-in animations and timelines but is heavier. Choose ScrollMagic for minimal footprint and flexibility, or GSAP for ready-made effects without extra integration.

Question 3

Can ScrollMagic handle horizontal scrolling?

Accepted Answer

Yes, it supports both horizontal and vertical scrolling by setting the `vertical` option to `false`. This allows tracking elements in horizontal scroll containers, useful for carousels or side-scrolling interfaces.

Question 4

How to track multiple elements with ScrollMagic?

Accepted Answer

Create a separate ScrollMagic instance for each element, as selectors only match the first element. This ensures independent tracking and event handling, though it requires managing multiple instances in your code.

Question 5

What happens if I forget to call refresh() after layout changes?

Accepted Answer

ScrollMagic won't update bounds until the next scroll event or manual refresh, potentially causing incorrect progress calculations or missed events. It's recommended to call `refresh()` after dynamic changes like CSS toggles or content injection to maintain accuracy.

Question 6

Is ScrollMagic good for lazy loading images?

Accepted Answer

Yes, it's well-suited for lazy loading by using the 'intersect' mode to trigger when elements enter the viewport. In the 'enter' event, you can load images or content, but you'll need to implement the loading logic yourself as it doesn't include built-in lazy loading.

ScrollMagic

What is ScrollMagic?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions