Animation Container
Business Background
Customize your web page with animation using multiple images according to your business logic in just a few clicks and no code.
Titan Solution
Add the animation container 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 ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation.
- How to disable animation preview to optimize the builder performance.
To learn more about animation interactivity, click here.
Add an animation container
- Click the expand (+) icon next to the settings icon in Titan Web. A list of elements will show.
- Select the Media option from the list.
- Drag-and-drop the Animation element to the canvas.
- Click the Animation element’s Gear icon and click the Edit Mapping button. The Configure Animated Options screen opens.
- Select one of the options to configure the animation container:
- Add animation interactivity:
- Disable animation preview to optimize the builder performance.
Add image item
- Click the Add Image Item option to add an image item.
- Click the Select Image button.
- Add an image.
- Choose an existing image.
- Select an image from Salesforce.
- Upload an image.
- Use a URL.
- 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
- Repeat the steps until you have all the images required.
Make sure that you add unique labels to each image. (You will use these when you configure the animation interactivity.)
- Click the Apply button.
Add an SVG item
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>
- Click the Add SVG item option. The Add SVG Content screen opens.
- Add the SVG content and click the Apply button.
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.)
- Use the drop-down lists to select the In and/or Out Animation for each item:
- SVG ID
- Clock icon (a)
- Heart icon (b)
- Arrow icon (c)
- SVG ID
- Use the Hide Onload toggle switches to hide the item on load if necessary.
- Click the Apply button.
Add Lottie item
In this example, the following code was used:
Free UFO Animated Icon by East Supply.
- Click the Add Lottie item option. The Add an Animation screen opens.
- Click the Upload tab.
- Drag an image or upload a file from your computer.
- Type a name for the animation and click the Save icon. The file is uploaded, and the Choose tab opens.
- On the Choose tab, click the file to select it.
- Click the Apply button. Two success messages are shown:
- Preloading Lottie animation to collect classes.
- Lottie animation assets collected.
- Click the Layer List option to open the list.
- If necessary, use the Loop toggle switch to loop a layer.
- Only one layer can be looped.
- Click the Apply button.
Disable animation preview
You can disable the animation preview for the project to improve page optimization.
- 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.
The animations added to the project will not be shown in the builder.
