ActivePresenter Saola Animate Pricing Download

No id property and where to save images?

Problem: No id property and where to save images?
Saola Animate version: v3.0.1
OS: win10

Q1) How do I set “id” property to an element?
I ask this because I cannot see an option named “id” on the Properties pane.
and I have some JavaScript code that all work with “id” property.
For example, I have a div as: <div id="cat"></div>
and set a background-image to it, please tell me how to?
Thank you very much,

Hi Afei,

Users don’t have to know about ID since Saola Animate creates it automatically in HTML5.
To set a background image, you can use the background image element: Click the drop-down arrow on the Image button > Background Image.

or set a background image by using Image Fill for DIV elements.


1 Like

Q1) What code can I get this object of this cat.png with JavaScript?
for example, I give it a name “catty” on the Properties pane.

Q2) Where can I see and edit the CSS “position” property?
I want to modify the CSS position like: absolute, relative, static.
for example, I have a div named “Div_1”.

Thank you

Hi afei,

Q1) I’ve mentioned several times in your other questions:

// Saola Animate element
var cat = doc.getElement('catty');
// HTML element
var catNode = cat.dom;

Q2) All Saola Animate elements have an absolute position.
You can change a CSS property (including position) by using JavaScript or CSS.

// JavaScript = 'relative';

/* CSS
 - Set a class name for your element (e.g. catty-class)
 - Add CSS rules to Document > Edit CSS
.catty-class {
  /* use !important to overwrite what Saola Animate set */
  position: relative !important; 

You may need to take a look at the following tutorial on using CSS with Class Name in Saola Animate:


1 Like

I’ve read your link
Using CSS to Create Text Effects

There are two statements which I don’t understand:
Q1) What does the {$systemFonts} mean?
Q2) What does the “div” behind the viewport-unit mean?
.viewport-unit div { font-size: 40vw !important; }
as I know that .viewport-unit means a class name.
but I don’t know why “div” is added behind it.

Thank you very much

Hi afei,

Q1) It’s the place holder for embedding systems fonts, please keep it intact.

Q2) It’s a CSS descendant selector. It’ll select all div elements having an ancesstor with viewport-unit class.
In Saola Animate, a descendant div is created inside an element to display text so we must use this selector.


1 Like