Animations are a great way to add interactivity to your applet and create an even more engaging experience for your end-user. Some possibilities include:
- Add motion to backgrounds
- Create interactive menus
- Design engaging screen transitions
- Emphasize bullet points on a page
- Show progression through a timeline
- Draw attention to key elements, like parts or features of a product, navigational indicators, etc.
There are five types of animations:
- Change Position: Move an object from one position (x,y) to another.
- Change Opacity: Fade an object in or out (replaces the previous Fade In and Fade Out).
- Change Rotation: Rotate an object clockwise or counter-clockwise.
- Change Scale: Make an object larger or smaller.
- Preset Animation: this animation provides support for applets that use the Fade In and Fade Out animations from previous versions of SmartStudio. Preset Animations use the following default settings:
- Easing Type: Easing Both
- Auto-reverse: not enabled
- Duration: 0.5 seconds
- Repeat: 0
Note: If you want to fade an object in or out, we recommend that you use the Change Opacity animation.
Triggers, Target Objects and Properties
Animations are defined as Animate actions on buttons and hotspots, and the selected animation runs when the action is triggered. Most triggers are linked to user interactions (eg. Touch, Touch and Release, etc). Animations can also be triggered when an applet pages loads (eg. Now), which allows you to animate objects without any user action required. This trigger can be combined with delays to create precisely-timed, self-executing choreography.
Multiple animations can run at the same time (either on the same object or different objects), but in order to avoid device performance issues, we recommend that you limit your design to a maximum of 4 concurrent animations.
Animations can target (ie. be applied to) most SmartStudio objects, including images, text blocks, Scrollmotions, image sequences, videos, or other buttons. (Currently, animations cannot target objects in containers).
Each animation changes one of an object's characteristics by changing object properties from a starting value to an ending (or New) value. The starting value is taken from the value set in the SmartStudio Common Bar, and the New (ending) value is set in the animation properties.
For more information on trigger options, target objects, and delays, see Button Actions: General Properties.
Yout might also want to look at step-by-step instructions for animating objects in your applet.