Container Scroll

A container scrolling effect that transforms the content inside based on scroll progress. Features smooth transitions with scaling and rotating effects on scroll.

Install using CLI

npm
pnpm
bun
yarn
npx shadcn-vue@latest add "https://inspira-ui.com/r/container-scroll.json"

Install Manually

Copy and paste the following code in the same folder

ContainerScroll.vue
ContainerScrollTitle.vue
ContainerScrollCard.vue
API
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.
Props
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.
Usage
ContainerScroll.vue
<ContainerScroll :rotate="rotateValue" :scale="scaleValue" :translateY="translateYValue">
  <template #title>
    <!-- Your title content here -->
  </template>
  <template #card>
    <!-- Your card content here -->
  </template>
</ContainerScroll>

ContainerScrollTitle
The ContainerScrollTitle component handles the title's transformation as the user scrolls, applying a vertical translation effect.
Props
Prop NameTypeDefaultDescription
translateNumber0Controls the vertical translation of the title.
Usage
ContainerScrollTitle.vue
<ContainerScrollTitle :translate="translateYValue">
  <!-- Title content here -->
</ContainerScrollTitle>

ContainerScrollCard
The ContainerScrollCard component applies scale and rotation effects to the card content as the user scrolls through the page.
Props
Prop NameTypeDefaultDescription
rotateNumber0Controls the rotation effect of the card.
scaleNumber1Controls the scaling effect applied to the card.
Usage
ContainerScrollCard.vue
<ContainerScrollCard :rotate="rotateValue" :scale="scaleValue">
  <!-- Card content here -->
</ContainerScrollCard>

Features
  • 3D Scroll Effects: The content transforms based on scroll progress, including rotation, scaling, and translation.
  • Responsive Design: Adjusts behavior dynamically for mobile and desktop views.
  • Smooth Transitions: Leverages CSS keyframes and scroll-based transformations for a fluid user experience.
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.
Features
  • Dynamic Transformations: Based on scroll position, the content scales, rotates, and translates for a 3D effect.
  • Flexible Content: Place any custom content inside the title and card slots.
  • Responsive: Adjusts for mobile and desktop, providing a consistent experience across devices.
Credits
Compare
Slide to compare any two pieces of content - images, designs, code, or custom elements
Dock
A macOS-style dock with magnifying icons as you hover over them.