Defines how many scroll sections will be used in the animation sequence.
Each section can have its own position and zoom settings. As the user scrolls, the animation transitions between these sections.
Controls the scroll distance between each section. The value represents a percentage of the viewport height.
Increasing the gap spreads transitions further apart in the scroll timeline, making animations feel slower and more gradual.
Defines the background color behind the animated images. This is useful when images do not fully cover the screen or when images with transparency expose the layer underneath.
Adds a color overlay above the image layer. This can be used to darken or lighten images, improve text readability, or create color-tinted visual effects.
A subtle overlay is often enough to make foreground text easier to read without changing the overall feel of the background image.
Controls the aspect ratio behavior of the background images. A demonstration of how each image fits the selected aspect is shown in edit mode.
This value influences how the image is scaled relative to the viewport and affects how zoom transitions behave.
Set the slider option to 17 to define your own aspect by image dimensions.
Drag & drop or select background images for each corrisponding section. You may also optionally reference a warehoused image instead of loading an image from your device.
If you do not add an image to a section, it will automatically inherit the image from a previous section. This is useful if you want to focus on different parts of a single image over multiple sections.
These settings define how the background image moves and transforms during scroll.
Transition animations originate from the center of the image. The center of the image will always be visible across all device viewports.
Transition animations originate from the edges of the viewport. This creates a more varied transition animation accross device viewports.
When Image Scale is set to Contain transition animations originate from the image edges.
Ensures the transitioning image always fills the entire viewport. Images may be scaled up & cropped to maintain full coverage during X and/or Y transition animations.
When Image Scale is set to Contain the image will fill the viewport prioritizing image visibility.
Animations will be capped or prevented if they would move the transition origin out of the viewport.
Images will not scale to cover X and/or Y transition animations. Instead animations will be capped or prevented if they would expose the empty space behind the image.
When Image Scale is set to Contain the image will scale down to priortize transition animations motion over image visibility.
Images scale & crop to fill the viewport. This is ideal for immersive full-screen backgrounds.
Ensures the entire image is visible within the viewport. Depending on the image dimensions & defined size, empty space may appear around the image.
When this option is enabled an Image Scale Slider is provided to adjust the base scale of the background images.
Use the settings below to get an idea of how each affects the animations across different viewport aspect ratios.
No zoom movement occurs.
Images gradually zoom inward during scroll.
Images gradually zoom outward during scroll.
Images zoom in and out during scroll.
When any option other than None is selected, an Intensity slider is provided to control how strong the effect is. Higher intensity values create more noticeable movements.
No horizontal movement is applied.
The images move in one consistent horizontal direction during scroll.
The horizontal direction reverses between sections for a back-and-forth effect.
No vertical movement is applied.
The images move in one consistent vertical direction during scroll.
The vertical direction reverses between sections for a back-and-forth effect.
Controls the blur applied to the images in the first and last sections as the entire element enters or exits the viewport on scroll. Higher values create a stronger depth transition effect on enter and exit.
This effect only applies if there is scrollable space above or below the sections.
Controls the blur applied during section-to-section transitions, helping smooth the visual change between background states.
This effect only applies if the background image in not inherited from the section before it.
Applies easing for smoother scaling when Zoom transitions change direction.
Applies easing for smoother horizontal motion when X transitions change direction.
Applies easing for smoother vertical motion when Y transitions change direction.
When using directional or non-alternating transitions, enabled easing options will create an in & out motion.
This will add a slight pause between transitions as sections take center focus.
We recommend enabling X or Y easing when using X or Y alternate transitions to prevent sudden animation direction changes.
Enables testing mode for previewing animations more easily while configuring the Stack.
A demonstration of how the animation applies to 3 different viewport aspcts will be shown for easy reference.
Improves compatibility with layouts that use overflow constraints and can help prevent clipping issues in certain container setups.
This is useful if images are clipped inside wrappers that use hidden or constrained overflow.
Reverses the direction of zoom animations.
Reverses horizontal motion.
Reverses vertical motion.
These settings allow precise adjustments to individual section transition animations. Using any value other than 0 will overwrite any corresponding transitions set in the Transition Settings.
These sliders define where the background image of the first section transitions from as it is scrolled into view.
These settings only apply if there is scrollable space above the first section.
These sliders define where the background image of the corresponding section transitions to as it is scrolled into view and where it transitions from as it is scrolled out of view.
These sliders define where the background image of the last section transitions to as it is scrolled out of view.
These settings only apply if there is scrollable space below the last section.
You can forgo the Zoom, X, & Y transition settings and define your own custom animations using these sliders. We recommend enabling Testing / Demo Mode and experimenting with different values to create some really unqiue animations.