Scatter Container
A Container Element that randomly positions its child elements within the constraints that you define, helping you create generative designs.
Note:
The Scatter Container applies position absolute to the target elements. The height of the container will not be affected by the nested elements, by default a height of 300px is applied but you should define a height value that suits your design requirements
The Scatter Container applies position absolute to the target elements. The height of the container will not be affected by the nested elements, by default a height of 300px is applied but you should define a height value that suits your design requirements
Content Tab
Targets:
The type of elements that should be targeted by the Scatter Container element.
- Childrens: Affects the elements that are directly contained within the Scatter Container element.
- Selector: Affect the elements defined by the CSS Selector. Use this when you want to target nested elements instead of the direct child, for example when using a Gallery element inside the Scatter Container and you wish to randomly position the images inside the gallery rather than the gallery element itself.
- CSS Selector: A valid CSS selector of child elements
Design Tab
Container:
- Width: The container width
- Height: The container height
- Background: The container background color
Scatter Effects:
- Horizontal Constraints (%): The constraints on the X-axis for the random positioning. Example: A slider value of 20 – 40 means that on the X-axis elements will be randomly positioned within 20% and 40% of the container width.
- Vertical Constraints (%): The constraints on the Y-axis for the random positioning. Example: A slider value of 20 – 40 means that on the Y-axis elements will be randomly positioned within 20% and 40% of the container height.
- Apply Rotation: Apply a rotation animation on the target elements before randomly positioning them
- Rotation Constraints (Degrees): The constraints for the rotation angles that will be applied. Example: A slider value of -20 – 20 means that the elements will have a random rotation applied between -20deg and 20deg angles.
Trigger:
- Trigger Type: When the animation should start
- Page Load: When the Page Loads
- On Scroll: On scroll based on the location settings defined ( Default is when the element enters the viewport )
- Using Interactions Extension: The animation will not run automatically and will instead be controlled via the Interactions extension
- Trigger Location Element: The vertical position of the element in % to use for the On Scroll Trigger Type. Example: With a value of 0%, the animation will run when the top of the element reaches the percentage of the viewport defined in the Trigger Location Viewport ( 0% is the top of the element and 100% is the bottom of the element )
- Trigger Location Viewport: The vertical position of the viewport in % to use for the On Scroll Trigger Type. Example: With a value of 80%, the animation will run when the element location defined in Trigger Location Element reaches the 80% mark of the viewport ( 0% is the top of the viewport and 100% is the bottom of the viewport )