LIVE NOW

Visual Configurator is now active — Customize 50+ professional animations Visual Configurator is live!

Get Started
ScrollStack Configurator

How to Use in Bricks Builder

  1. Customize your ScrollStack using the controls below
  2. Click the Get Code button and copy the JavaScript
  3. In Bricks Builder, add a Code element and paste the JavaScript
  4. Add the attribute
    data-scrollstack-container📋
    to your container element
  5. Add the attribute
    data-scrollstack-card📋
    to each card element inside the container
This tool creates a custom script with your settings built-in. Each card must have the data-scrollstack-card attribute for the animation to work correctly!
Card 1
This is the first card in the stack. As you scroll, it will animate with 3D transformations.
Card 2
This is the second card in the stack. Notice how it scales and rotates as you scroll.
Card 3
This is the third card in the stack. The shadow and darkening effects add depth to the animation.
BricksFusion Exclusive Get Your ScrollStack

Add stunning 3D scroll animations to your website with this custom-crafted JavaScript snippet.

  • Easy implementation with simple data attributes
  • Eye-catching 3D perspective animations
  • Fully responsive design that adapts to any container
  • Customizable animation speed and appearance
  • Works in all modern browsers and devices
Animation Settings
Animation Duration 0.8s

Lower values = faster animation transitions

Stagger Offset 20px

Distance between stacked cards when scrolling

Scale Factor 0.92

How much cards scale down when stacked (lower = more scaling)

Scale Increment 0.04

Progressive scale reduction for each card in the stack

Enable 3D Rotation

Adds a 3D rotation effect when cards are stacked

Enable Shadow Effect

Adds shadow to cards for depth perception

Enable Darkening Effect

Adds subtle darkening effect to stacked cards

Advanced Settings
Perspective 1000px

3D perspective intensity (lower = more dramatic effect)

Vertical Offset 16px

Vertical distance between cards when stacked

Container Padding 50px

Internal padding of the container for better spacing

Mobile Scale 0.6

Scale factor for mobile devices (lower = reduced effects)

Disable on Mobile

Turn off animations on mobile devices for better performance

Mobile Breakpoint 768px

Screen width below which mobile settings are applied

JavaScript Code