Animation Container

Business Background

Customize your web page with animated media using multiple images according to your business logic in just a few clicks and no code.

Titan Solution

Add the animated media to your web page with Titan Web. You can trigger a multi-image or use SVG. Alternatively, you can add a Lottie item.

How to Guide

In this article, we will look at the following:

• How to add the following to the animation container:
  • Add an image item: Add static images and configure the animation per image.
  • Add an SVG item: Add an SVG item with subclasses. The subclasses have IDs, and the animation is added to each subclass.
  • Add Lottie item: Add a Lottie item. Lottie is a JSON-based animation file format that uses JSON data to describe animation data.
  • Lottie Auto Play and Play Once: You can toggle whether or not you want to play the animation automatically or only once it is triggered by the end user.
• How to disable animation preview to optimize the builder performance.

To learn more about animation interactivity, click here.

Add an animated media element

1. Click the + icon to open the list of elements.
2. Select the Media option from the list.
3. Click-and-drag the Animated element to the canvas.

4. Click the Animated element’s Gear icon and click the Edit Mapping button. The Configure Animated Options screen opens.

5. Select one of the options to configure the animation container:
   • Add an image item
   • Add an SVG item
   • Add Lottie item
6. Add animation interactivity:
   • Add animation interactivity for images and SVG
   • Add animation interactivity for Lottie
7. Disable animation preview to optimize the builder performance.

Add image item

1. Click the Add Image Item option to add an image item.
2. Click the Select Image button.

3. Add an image.
   • Choose an existing image.
   • Select an image from Salesforce.
   • Upload an image.
   • Use a URL.

4. Use the drop-down lists to select the following for the added image:
   • In Animation: this is the animation that brings the image into the container.
   • Out Animation: this is the animation that takes the image out of the container

5. Repeat the steps until you have all the images required.

6. Click the Apply button.

The image item is added to the project and will be animated according to the settings.

Add an SVG item

1. Click the Add SVG item option. The Add SVG Content screen opens.

2. Add the SVG content and click the Apply button.

3. Use the drop-down lists to select the In and/or Out Animation for each item:
   1. SVG ID
      • Clock icon (a)
      • Heart icon (b)
      • Arrow icon (c)

4. Use the Hide Onload toggle switches to hide the item on load if necessary.
5. Click the Apply button.

The SVG item is added to the project and will be shown according to the settings.

Add Lottie item

1. Click the Add Lottie item option. The Add an Animation screen opens.
2. Click the Upload tab.
3. Drag an image or upload a file from your computer.
4. Type a name for the animation and click the Save icon. The file is uploaded, and the Choose tab opens.

5. On the Choose tab, click the file to select it.

6. Click the Apply button. Two success messages are shown:
   • Preloading Lottie animation to collect classes.
   • Lottie animation assets collected.
7. Click the Layer List option to open the list.

8. If necessary, use the Loop toggle switch to loop a layer, that is, to play the layer on repeat.
   • Only one layer can be looped.
9. Click the Apply button.

The Lottie animation is added to the project with the relevant animation settings.

Lottie Auto Play and Play Once

When you add a Lottie animation element, it is added with the Lottie Auto Play option switched off.

You can switch Lottie Auto Play on and off under Animation Settings > Interactivity > Lottie AutoPlay:

1. Use the toggle switch to enable the Lottie Auto Play option.
   • This means the animation will play each time the page loads.

You can also set the Lottie Play Once action. The animation action will only play once and then stop.

Any action that will trigger the Animation interactivity will contain the Lottie actions Auto Play and Stop Auto Play:

You can read more about Animation Container Interactivity.

Disable animation preview

You can disable the animation preview for the project to improve page optimization.

1. Click the View drop-down list and select the Disable Animation Preview option.

The animations added to the project will not be shown in the builder.