Skip to main content

​
Overview

Container Scroll creates a 3D scroll effect that transforms content with scale, rotation, and translation based on scroll progress. Perfect for creating engaging scroll-based animations.

​
Usage

<template>
  <ContainerScroll :rotate="0" :scale="1" :translateY="0">
    <ContainerScrollTitle :translate="0">
      Your Title
    </ContainerScrollTitle>
    <ContainerScrollCard :rotate="0" :scale="1">
      Your content
    </ContainerScrollCard>
  </ContainerScroll>
</template>

​
API Reference

​
ContainerScroll

The ContainerScroll component creates a 3D scroll effect. As the user scrolls, the content inside the container is transformed with scale, rotation, and translation effects.
Prop NameTypeDefaultDescription
rotateNumber0Controls the rotation of the inner content based on the scroll progress.
scaleNumber1Controls the scaling transformation applied to the content during the scroll.
translateYNumber0Controls the vertical translation of the title during the scroll.

​
ContainerScrollTitle

The ContainerScrollTitle component handles the title’s transformation as the user scrolls, applying a vertical translation effect.
Prop NameTypeDefaultDescription
translateNumber0Controls the vertical translation of the title.

​
ContainerScrollCard

The ContainerScrollCard component applies scale and rotation effects to the card content as the user scrolls through the page.
Prop NameTypeDefaultDescription
rotateNumber0Controls the rotation effect of the card.
scaleNumber1Controls the scaling effect applied to the card.

​
CSS Variables

To customize the scroll animations and responsiveness, you can set the following CSS variables:
  • --scale-start: Initial scale value for the card.
  • --scale-end: Final scale value for the card as the scroll progresses.
  • --rotate-start: Initial rotation value for the card.
  • --rotate-end: Final rotation value for the card as the scroll progresses.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us