Animated Media

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 Video

  • Coming soon!

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, a JSON-based animation file format that allows you to add animations on any platform as easily as static assets. These small files work on any device and can scale up or down without pixelation.
    • Lottie Auto Play and Play Once: You can switch Lottie Auto Play on and off depending on the needs of your project or to play the animation only once.
  • 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 expand (+) icon next to the settings icon in Titan Web. A list of elements will show.
  2. Select the Media option from the list.
  3. Drag-and-drop the Animated element to the canvas.
Animation element
Animated element
  1. Click the Animated element’s Gear icon and click the Edit Mapping button. The Configure Animated Options screen opens.
Edit Mapping
Edit Mapping
  1. Select one of the options to configure the animation container:
  2. Add animation interactivity:
  3. 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.
Configure Animated Options screen
Configure Animated Options screen
  1. Add an image.
  1. 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
Select Animation
Select Animation
  1. Repeat the steps until you have all the images required.
Note:

Make sure that you add unique labels to each image. (You will use these when you configure the animation interactivity.)

  1. Click the Apply button.

Add an SVG item

Note:

In this SVG example, the following SVG is used.

<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 600 600″ width=”600″ height=”600″ preserveAspectRatio=”xMidYMid meet” style=”width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);”>
<defs>
<style>
g {
display: none;
}
g:target {
display: inline;
}
</style>
</defs>

<g id=”icon-clock”>
<path d=”M20.6,23.3L14,16.7V7.9h4v7.2l5.4,5.4L20.6,23.3z M16-0.1c-8.8,0-16,7.2-16,16s7.2,16,16,16s16-7.2,16-16S24.8-0.1,16-0.1z
M16,27.9c-6.6,0-12-5.4-12-12s5.4-12,12-12s12,5.4,12,12S22.6,27.9,16,27.9z”/>
</g>
<g id=”icon-heart”>
<path d=”M32,11.2c0,2.7-1.2,5.1-3,6.8l0,0L19,28c-1,1-2,2-3,2s-2-1-3-2L3,18c-1.9-1.7-3-4.1-3-6.8C0,6.1,4.1,2,9.2,2
c2.7,0,5.1,1.2,6.8,3c1.7-1.9,4.1-3,6.8-3C27.9,1.9,32,6.1,32,11.2z”/>
</g>
<g id=”icon-arrow-right”>
<path d=”M32,15.9l-16-16v10H0v12h16v10L32,15.9z”/>
</g></svg>

  1. Click the Add SVG item option. The Add SVG Content screen opens.
Add SVG Item
Add SVG Item
  1. Add the SVG content and click the Apply button.
Add SVG Content screen
Add SVG Content screen
Note:

The SVG data is automatically added to the Configure Animated Options screen.

  • Each sub-element has a unique ID.
  • Take note of the unique labels for each image. (You will use these when you configure the animation interactivity.)

  1. 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)
Select Animation (image edited)
Select Animation (image edited)
  1. Use the Hide Onload toggle switches to hide the item on load if necessary.
Hide Onload toggle switches (image edited)
Hide Onload toggle switches (image edited)
  1. Click the Apply button.

Add Lottie item

Note:

In this example, the following code was used:

Free UFO Animated Icon by East Supply.

  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.
Add an Animation - Upload screen
Add an Animation – Upload screen
  1. On the Choose tab, click the file to select it.
Add an Animation - Choose screen
Add an Animation – Choose screen
  1. Click the Apply button. Two success messages are shown:
    • Preloading Lottie animation to collect classes.
    • Lottie animation assets collected.
  2. Click the Layer List option to open the list.
Configure Animated Options screen
Configure Animated Options screen
  1. If necessary, use the Loop toggle switch to loop a layer.
    • Only one layer can be looped.
  2. Click the Apply button.
Configure Animated Options screen
Configure Animated Options screen

Lottie Auto Play and Play Once

When you add an animation element, it is added with Lottie Auto Play switched on on your form. It means each time the page loads the animation will play. When you have animation in a multi-step or stepper, each step has its own animation, and therefore, you might not want all animations to play. The ability to stop Auto Play gives you the ability to stop Auto Play for all animations in a project. Similarly, you can also enable Auto Play under Lottie actions to play all animations in your project.

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

Lottie AutoPlay
Lottie AutoPlay

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

Lottie Play Once
Lottie Play Once

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

Auto Play and Stop Auto Play
Auto Play and Stop Auto Play

You can read more on Animation Container Interactivity.

Disable animation preview

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

  1. Click on 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.
Disable Animation Preview option
Disable Animation Preview option

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

No preview in builder
No preview in builder

Hidden Title

Need more help?