Implementing Scroll-Driven Animations in Vue3 with Throttling for Performance

The author, inspired by Apple’s website animations, creates a similar scroll-driven animation effect for a factory website using Vue3.

The core idea is a formula that maps the page’s scroll position to a normalized value (0‑1) based on the total scrollable height, allowing elements to appear progressively as the user scrolls.

let scrolled = html.scrollTop / (html.scrollHeight - html.clientHeight)

Key DOM properties used are html.scrollTop, html.scrollHeight, and html.clientHeight, which represent the current scroll offset, total page height, and viewport height respectively.

To apply the formula to a specific section rather than the whole page, the author adjusts the calculation to use the element’s offsetTop and offsetHeight, checking whether the scroll position lies within that range.

let parentElement = el.parentElement; //获取父元素
let htmlScrollTop = document.documentElement.scrollTop + document.documentElement.clientHeight
let offsetTop = parentElement.offsetTop
let offsetHeight = offsetTop + parentElement.offsetHeight
if (htmlScrollTop >= offsetTop && htmlScrollTop <= offsetHeight) {
  let scrolled = (htmlScrollTop - offsetTop) / (offsetHeight - offsetTop)
}

In the Vue3 directive, the scroll listener updates the line height with ${scrolled * 90}% and iterates over list items to set a custom CSS property --progress that drives opacity and transform.

let total = 1 / liElements.length
for (let index = 0; index < liElements.length; index++) {
  let row = liElements[index]
  let start = total * index
  let end = total * (index + 1)
  let progress = (scrolled - start) / (end - start)
  if (progress >= 1) progress = 1
  if (progress <= 0) progress = 0
  row.style.setProperty('--progress', progress)
}

The article also introduces a throttle algorithm to limit the frequency of the scroll handler, preventing performance degradation and animation stutter by ensuring the callback runs at most once every 17 ms.

function throttle(func, wait) {
  let lastTime = 0;
  return function() {
    let now = Date.now();
    if (now - lastTime > wait) {
      func();
      lastTime = now;
    }
  }
}

Finally, the complete Vue3 directive, HTML markup, and CSS styles are provided, demonstrating how to combine the scroll‑based formula, throttling, and CSS custom properties to achieve smooth, sequential animations.