This component creates a falling domino effect where your elements animate in a cascading sequence as users scroll. Each instance moves through three animation states (start, middle, and end), creating smooth transitions that mimic dominoes toppling one after another before disappearing off screen.
This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click here to see the full library
Copy and paste the Domino Scroll component code into your Framer project file
Connect your elements to the Instances array
Set your Scroll Distance to control how much scroll is needed to complete all animations (higher values = slower, more gradual animations)
Adjust the Repeat Count if you want your instances to loop multiple times during the scroll
Configure the Overlap percentage to control how much animations overlap (0% = one finishes before the next starts, 100% = all animate together)
Customize the three animation states by adjusting the Transform properties (Translate X/Y/Z, Rotate X/Y/Z, Scale, and Perspective) in Start State, Second State, and End State to create your domino falling effect
Adjust the Background Color to match your design
The component works by taking any elements you want (images, cards, text blocks, etc.) and animating them through three transformation states as you scroll. You control how far apart the animations start (overlap), how long the scroll area is (scroll distance), and can even repeat your elements multiple times. Each state lets you adjust position (X, Y, Z), rotation (X, Y, Z), scale, and perspective to create the exact falling or flying effect you want. The component handles all the scroll calculations automatically.
When you purchase this component, you'll receive:
The Component Itself - Full access to the component all future updates
Remix File with Component Setup - A complete Remix file with the component pre-configured and ready to integrate into your project.
Setup Instructions - Clear, step-by-step instructions to help you implement the component quickly and correctly.
Dedicated Support - Direct access to our team for assistance if you encounter any issues during setup or implementation.
For any queries and help setting up the component, contact hello@segmentui.com
If a component does not function as advertised and the issue cannot be resolved, you are eligible for a full refund under our quality guarantee. Refunds will not be provided for any other reasons, including change of mind, accidental purchase, lack of use, or expectations of features not explicitly advertised.
Nabeel
