VueCraft NPM

Element Viewport Position ​

useElementViewport(target) — reactive position of an element relative to the viewport: its rect, viewportProgress, and distanceFromCenter, updated on the shared requestAnimationFrame loop.

ts
function useElementViewport(
  target: MaybeRefOrGetter<HTMLElement | null | undefined>,
): UseElementViewportReturn

A thin reactive wrapper over createElementTracker() — see that page for exactly what each field means and how it's computed.

Return value ​

rect ​

Ref<DOMRectLike>

Default (before target resolves, or during SSR): { top: 0, left: 0, right: 0, bottom: 0, width: 0, height: 0 }.

viewportProgress ​

Ref<number>

0..1, from the element entering at the viewport's bottom edge to leaving at its top edge.

distanceFromCenter ​

Ref<number>

Example:

vue
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useElementViewport } from '@macrulez/inview-vue'

const section = ref<HTMLElement | null>(null)
const { viewportProgress } = useElementViewport(section)
const opacity = computed(() => Math.min(1, viewportProgress.value * 2))
</script>

<template>
  <section ref="section" :style="{ opacity }">...</section>
</template>

For a ready-made parallax effect built on this same data, see Parallax Layer.