Animations can be used in many ways. Perhaps you imagine users being introduced to your blipp through a series of moving assets, or maybe buttons simply move in place to give an indication of interaction. For example, you can make a plane fly across the screen using the slide animation, or a car seem likes it moving closer to the screen and getting bigger by using the scale animation - it depends on how robust you seek your blipp to be.
Blippbuilder offers various preset animations, which can be added and combined to any assets within a blipp to create engaging sequences.
Breakdown of the Animation Bar
- On the left of the timeline, there are individual layers corresponding to each asset present in the stage
- In the center of the timeline, you can drop the preset animations to coordinate with the assets path. The numbers boarding the top of the timeline represent seconds, allowing your animation scene to start at 0 seconds when the assets are loading.
- On the right of the timeline is a list of the animation presets, each with their configuration properties. The animation presets include:
- You can use the time scrubber to preview the status of the animation at a particular point in time by dragging it along the timeline
- Zoom in and out of the center of the timeline to see your animation sequence through various vantage points. The zoom control found on the bottom left of the bar
Terminology used in this section
- Time scrubber - is an interaction in which a cursor drags across a segment of the timeline to see the animation in action
How to add animations to your blipp:
- Add your assets to the stage. To view the animation timeline, click anywhere on the bottom left panel.
- On the right of the timeline is a list of the animation presets. You can drag and drop any of the available animations into a time slot, aligned to the corresponding asset listed on the left of the bar.
- Alternatively: drag and drop an animation to an asset on the stage. The animation will start from the time defined by the location of the time scrubber.
- If you want to change the settings of the animation, just click on the animation preset in the timeline and this box will reappear on the left-hand bar.
5. Drag and drop multiple animations onto assets within the Animation timeline. They will appear stacked on the timeline.
6. Use the scrubber in the timeline to see how combined animations appear with the asset on the stage.
You may want to give asset the same animation effects. Instead of manually dragging and dropping each animation and matching its settings on the timeline, it’s easier to select the animations, copy and then paste them on the corresponding assets.
In the comments below, share your questions on animation and let us know how you plan to use animation in your blipps.