Scroll Animation

Este composable permite agregar animaciones basadas en scroll a un elemento específico. Cuando el elemento entra en el viewport (es visible en pantalla), se le añade una clase CSS personalizada (por defecto "visible").

Implementación del Util:

export function scrollAnimation({
  element,
  className = "visible",
}: {
  element:
    | HTMLElement
    | Element
    | Ref<HTMLElement | Element>
    | Ref<HTMLElement | Element>["value"]
    | Ref<null | undefined>
    | null
    | undefined;
  className?: string;
}) {
  // Se obtiene el valor actual del elemento, en caso de ser una ref
  const valueUnref = unref(element);
  // Si el elemento no está presente, se lanza un error en consola
  if (!valueUnref)
    return console.error(`The element you want to animate isn't in the DOM`);

  const elementToScroll = valueUnref;

  // Función que maneja el evento de scroll y determina si el elemento está en pantalla
  const handleScroll = () => {
    const { top, bottom } = elementToScroll.getBoundingClientRect();
    if (top <= window.innerHeight && bottom >= 0)
      elementToScroll.classList.add(className);
  };
  // Se añade el listener al evento scroll del documento
  document.addEventListener("scroll", handleScroll);
  // Se limpia el listener cuando el componente se desmonta
  onBeforeUnmount(() => {
    document.removeEventListener("scroll", handleScroll);
  });
}

Uso en el Componente Vue

Ejemplo de cómo se puede usar este util para aplicar una clase animada cuando un elemento entra en el viewport.

Implementación del Script:

const animatedElement = ref<HTMLElement>();

// Se llama al composable dentro de onMounted
onMounted(() => {
  scrollAnimation({
    element: animatedElement,
    className: "fade-in", // Clase personalizada para la animación
  });
});

Implementacion del Template:

<template>
  <div ref="animatedElement" class="scroll-anim-target">
    <h2>Este título aparecerá con animación al hacer scroll</h2>
  </div>
</template>

CSS:

.scroll-anim-target {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-anim-target.fade-in {
  opacity: 1;
  transform: translateY(0);
}