Animations in Flex bring experiences to life, enhancing interactivity and engagement. They guide user attention, smooth transitions, and make your content feel more intuitive and impactful.
To create an Animation 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
In the "Animation" section of the Actions Panel on the right side of the Flex workspace, choose the animation 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 animation tile
Once you've selected an animation, you can customize its behavior:
Play On - how the animation will trigger (View, Hover, Click)
Direction - sets the direction of the animation; will vary depending on the selected animation
Rotation - the animation will rotate the target clockwise or counterclockwise
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)
Duration - the length of the animation (0-5000ms)
Delay - the duration before the animation triggers (0-5000ms)
Flow - sets the easing of the animation (Linear, Ease in, Ease out, Ease in out, Ease back in, Ease back out)
Loop - sets the repeat behavior of the animation (Play once, Repeat, Mirror)
Repeat on scroll - can be toggled on to replay the animation every time the viewer scrolls away from and back to the target in their viewport
Select Apply
Once applied, you can edit an animation on a target by selecting it in the Actions Panel while in Animate mode
All animations 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.