Adding Animation

Animations can be used in many ways. You could introduced users to your blipp through a series of moving assets, or buttons could simply move into place to give indication of an interaction.

From making planes fly across the screen using the slide animation to having a car seemingly move closer to the screen, getting bigger by using the scale animation the possibilities are endless. How you use animation with really depends on how robust you’d like 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.

Key terms

Time scrubber: The cursor on the animation timeline that allows for convenient animation editing. Each dash represents different times during a blipp. You can drag the time scrubber to different spots on the animation timeline and make adjustments that correlate to that moment in the blipp.

For a refresher on terminology check out our glossary.

Breakdown of the animation timeline

1. On the left of the timeline there are individual animation layers corresponding to each asset present in the stage. You can access these by clicking on the circle button on the bottom left next to the animation layers.
2. The numbers at the top of the timeline represent seconds, allowing your animation scene to start at 0.0 seconds, when the blipp’s assets are loading.
3. When an asset is on the canvas you can drop the preset animations from the motion effects section on the right hand side to the animation layers.
4. On the right of the timeline is a list of the motion effects presets, each with their own configuration properties. The animation presets include: 

• Move
• Rotate
• Scale

     5. You can use the time scrubber on the bottom of the screen to preview the status of the animation at a      certain point in time by dragging it along the timeline.

     6. 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.

Access your animation timeline

1. Add your blipp assets to the stage.
2. The animations layers rise into view when you click the arrow on the bottom left panel. As shown next to the yellow arrow in the above photo.

Set your animation timeline

1. To the right of the timeline is a list of motion effects presets. You can drag and drop any of the animations into a time slot, aligned to the corresponding asset listed on the left of the bar. 

                 a. Alternatively: Click on the animation layer you’d like to add animation to. Then double click on                  the desired animation and it will auto start at the beginning of the blipp, 0.0 seconds.

1. Once an animation is added, you can then click and drag it to your desired location. You can also edit the move setting on the right hand side.
2.  The animation’s effect menu will open up automatically on the right hand bar under motion effects. This will provide specific customization options associated to the corresponding animation. Choose your preferred animation details and they will auto save.

                 a. If you want to change these settings in the future, just click on the animation preset in the                        timeline and this box will reappear on the right hand bar.

Related articles

• Updating the Animation Timeline
• Add Specific Animation Effects: Move, Rotate and Scale

In the comments below let us know what you think about the animation process and what you are going to animate in you blipps.