This component creates a dramatic scroll-based animation: A stack of images, or any other component types can be added to the content, and as the user scrolls through the page, the images scatter outward, shrink and rotate at your control. Can be used to progressively uncover content hidden underneath the component, or as a standalone dramatic image effect.
You simply add images or content from your canvas to the component, adjust the component settings to your liking and you're good to go!
8 overlapping square images or any other content from your canvas (layered above each other)
Scroll-driven scatter + scale down + rotation of components
Scroll start and scroll end controls.
Adjustable scatter intensity via slider
Adjustable start and end sizes - perfect for screen responsiveness.
Adjustable rotation animation.
Animation easing control.
Corner radius controls
Default component height: dynamic based on your 'Start Size' values.
The 'Scroll Start' and 'Scroll End' fields dictate when the animation starts and stops.
Scroll Start = 0 - means the animation will start immediately when the component enters the screen.
Scroll End = 1 - means the animation end when the component leaves the screen.
For best results, it's recommended to set the Scroll Start to ~0.3, so that the top image is initially visible on it's own, and the Scroll End to ~0.6 so the animation is entirely visible before the component leaves the screen.
That's only a recommendation and you should feel free to achieve the effect you want for yourself:)
Use images with similar lighting/contrast so the scatter looks cohesive.
Use components like stacks with text, just make sure the components look good on all screen sizes.
Use scatter 80-100 for most sites; 200 is bold and attention-grabbing.
Add a layer with some impactful content in a stack with the component, set it's position to absolute, and add a Scroll Transform effect to it connected to a Scroll Section located below this stack. This will achieve the effect seen in the preview.
If you have any questions or need help setting up the component, feel free to hit me up:)
Amr Khalaili
