Skip to main content
Using animations as destinations

How to add animations as a destination to your creatives on the Mobiz platform.

Mobiz avatar
Written by Mobiz
Updated over a year ago

Animations allow you to set up conditional options for your creatives. Practical use cases include tap-to-reveal images, two-stage confirmation, or conditional confirmations.

Let's start with the basic functions:

Show: Reveals a creative that was initially hidden.

Hide: Hides a creative that was initially shown.

Toggle: Toggles between various creatives in the sequence.

Scroll to: Navigates from one creative in the template to another.

These functions can be used individually or in a combination of ways.

Hide and Show

The Hide and Show options are are useful when a creative needs to become hidden after an action or submission is performed. For example, if you are creating a multiple-stage confirmation or conditional confirmation.

Step 1 - Once you have placed your content into your template, click on Edit in the top right-hand corner of your creative.

Step 2 - From the Edit mode, click on the None (highlighted in blue) under the Destination header.

Step 3 - Select Animations from the list provided.

Step 4 - Select the first creative in your sequence to begin applying the animation triggers where needed. Once selected, it will be highlighted in red. Then, click on Add.

Step 5 - Your creative will then be added to the list as Image (1), for example.

Step 6 - Plan your actions out to ensure each creative element has the correct trigger. For example, Image (1) should Hide and Image (2) should Show.

Step 7 - Once you have selected the appropriate animation for each creative that forms part of the sequence, click on Save.

Step 8 - It's important to apply animations to each creative in order for the condition to work. If you Hide Image (1), Image (2) will need the instruction to Show in order for it to appear. Step 9 - Next, apply the appropriate onLoad Effect Type. Any creative that should only show when another condition is met should have Hide for the onLoad Effect Type so it does not appear when the campaign is first launched. Learn about applying effects here.

Step 10 - Once you have programmed all the creatives in your set and saved them, test them directly from your template viewer on the Mobiz dashboard.


Toggle

Use Toggle to reveal and hide a creative. This can be programmed to repeatedly switch on and off if needed. For example, a toggle could reveal an optional feedback form that you may not want continuously open on your campaign.

Step 1 - Once you have placed your content into your template, click on Edit in the top right-hand corner of your creative.

Step 2 - From the Edit mode, click on the None (highlighted in blue) under the Destination header.

Step 3 - Select Animations from the list provided.

Step 4 - Select the first creative in your sequence to begin applying the animation triggers where needed. Once selected, it will be highlighted in red. Then, click on Add.

Step 5 - Your creative will then be added to the list as Image (1), for example.

Step 6 - Plan your actions out to ensure each creative element has the correct trigger. For example, Image (1) should be set to Toggle and Image (2) should be set to Show.

Step 7 - Once you have selected the appropriate animation for each creative that forms part of the sequence, click on Save.

Step 8 - Because your animations work between two or more sets of creatives you will need to add the same animations on your subsequent creatives if you would like the animation to run both ways. However, these will need to be set up in the reverse order, so if they were programmed to Toggle on the first animation set, they should be programmed to Show on the second set.

Step 9 - In addition to applying the reverse animations on your second set of creatives, you will also need to apply the appropriate onLoad Effect Type. Any creative that should only be revealed when a user taps on another creative within the animation set should be set to Hide for the onLoad Effect Type. Learn about applying effects here.

Step 10 - Once you have programmed all the creatives in your set and saved them out, test them directly from your template viewer on the Mobiz dashboard.


Scroll To

Scroll To will direct to another creative within the template on the same page. The template will automatically scroll down or up to a pre-determined destination. A good use for this would be to divert your customer to another part of your template if they show specific interest in only one category of information.

Step 1 - Once you have placed your content into your template, click on Edit in the top right-hand corner of your creative.

Step 2 - From the Edit mode, click on the None (highlighted in blue) under the Destination header.

Step 3 - Select Animations from the list provided.

Step 4 - Select the first creative in your sequence to begin applying the animation triggers where needed. Once selected, it will be highlighted in red. Then, click on Add.

Step 5 - Your creative will then be added to the list as Image (1), for example.

Step 6 - Plan your actions out to ensure each creative element has the correct trigger. For example, Image (1) should be set to Show/Hide and Image (2) should be set to Scroll To.

Step 7 - Once you have selected the appropriate animation for each creative that forms part of the sequence, click on Save and test them directly from your template viewer on the Mobiz dashboard.

Did this answer your question?