Scroll Effects in Flex turn designs into immersive, motion-driven experiences. By linking animations to scrolling, you can reveal content naturally and create a sense of depth and flow that enhances the user experience.
To create a Scroll Effect in Flex:
Select the target asset, group, or section on the canvas or via the Layers Panel
Select Animate from the Contextual Toolbar, or navigate to the Modes toggle in the top-center of the Flex workspace and select the Animate mode
Select + in the "Scroll Effects" section of the Actions Panel on the right side of the Flex workspace
Select the Scroll Effect you want to apply to the target
You can preview animations in real-time on the canvas with the target in view by hovering over each effect tile
Once you've selected a Scroll Effect, you can customize its behavior:
Speed - sets the scrolling speed for the effect (0-200%)
Direction - sets the direction of the animation; will vary depending on the selected animation
Rotation - the animation will rotate the target clockwise or counterclockwise (0-360°)
Amount - sets the "Flip" animation amount (0-360°)
Offset - sets the animation to start offset from a specific fixed pixel value or % of the parent container on the X or Y axis
From - available on some animations, such as "Fade", allowing users to set a starting percentage to begin the animation from (eg, when using "Fade - In", if a user sets the "From" value to 50%, the animation will start with the target at 50% visibility, then fade it to 100% visibility as the viewer scrolls)
Axis - sets the axis from which the animation will trigger
Select Apply
Once applied, you can edit a Scroll Effect on a target by selecting it in the Actions Panel while in Animate mode
All Scroll Effects applied to an asset, group, or section can be viewed in the "Animation" section of the Inspector Panel and removed by selecting "Remove animation –" next to the animation name.