Chapter 172: Scroll Position of a ScrollTriggered Animation (Helper)

Core Idea

Given an animation that already has a ScrollTrigger, this helper returns the scroll position corresponding to any progress point in that animation (0 = start, 1 = end), so you can scroll the page to exactly where a scroll-driven animation begins, ends, or sits at any point in between.

Key Concepts

• Reads animation.scrollTrigger.start/.end and interpolates by the given progress.
• Also handles the containerAnimation case (horizontal scroll setups) by mapping through the container's own ScrollTrigger.
• The returned value is a real scroll offset, feedable directly into a scrollTo tween or plugin.

Code Examples

function getScrollPosition(animation, progress) {
  let p = gsap.utils.clamp(0, 1, progress || 0),
    st = animation.scrollTrigger,
    containerAnimation = st.vars.containerAnimation;
  if (containerAnimation) {
    let time = st.start + (st.end - st.start) * p;
    st = containerAnimation.scrollTrigger;
    return st.start + (st.end - st.start) * (time / containerAnimation.duration());
  }
  return st.start + (st.end - st.start) * p;
}

• What it demonstrates: converting an animation's internal progress into an absolute page scroll position.

Key Takeaways

1. The target animation must have a ScrollTrigger attached — this reads its start/end scroll bounds directly.

Connects To

• ScrollTrigger, ScrollToPlugin: the pair this helper is typically used with (compute position, then scroll to it).
• Get scroll position of an element (previous chapter): the related element-based lookup helper.