Using Saola Animate with a website page builder

I have just found Saola Animate and it looks very interesting and would be a good addition to my web building capabilities.

I use a couple of different page builders when creating websites and was interested to know how I can use Saola Animate with these types of tools. I am guessing that we have to preload some CSS and Javascript and then the html code can be added into a code block or something along these lines. If you could clarify how to do this, I would appreciate it.

I look forward to hearing from you.

Kind regards,

Ian

1 Like

Hi Ian,

The first step after exporting is uploading entire exported folder to your web server.
After that, you can use iframe tag to embed Saola Animate content into your page, for example:

<div style="width:100%; padding-bottom:75%; position:relative;">
  <iframe src="path/to/Saola Animate/HTML file" style="position:absolute; top:0px; left:0px; width:100%; height:100%; border: none; overflow: hidden;"></iframe>
</div>

As you may already know, the outer div in the above code with padding-bottom style is used to keep the aspect ratio for the iframe content. Please update its style depending on your content aspect ratio (see https://danieljones.design/css-aspect-ratio-calculator/ for more detail).
An example of this method is the banner of Saola Animate home page: https://atomisystems.com/saola-animate/. You can Inspect Element to see the code.

In case you want to show Saola Animate content directly inside your page (without using iframe), please open its HTML file in a text editor, copy parts of its content and make some changes as follows into your page:

  1. The player script:
    <script type="text/javascript" src="new/path/to/slplayer.js"></script>
    Please remember to update the path of slplayer.js file. This path can be absolute, or relative to the your page.
  2. The content inside the body tag, e.g.
    <!-- you may need to add styles for Container_ID div to suit your need -->
    <div id="Container_ID" style="position: relative; height: 100%;"></div>
    <script type = "text/javascript">
      // script to load Saola Animate content into Container_ID div
      (function(Saola) {
        var li = {"color":"#2090e6","density":9,"diameter":60,"range":1,"shape":"oval","speed":1};
        Saola.openDoc('path/to/Saola Animate/content JavaScript file', 'Container_ID', {
          paused:false,
          preloaderOptions: li,
          center: 'horizontal',
          resourceFolder: 'path/to/resources'
        });
      })(AtomiSaola);
    </script>

Please remember to update the path of content JavaScript file, and path of the resources folder. These path can be absolute, or relative to the your page.
An example of this method is the Motion Path feature in Saola Animate home page: https://atomisystems.com/saola-animate/. You can click the Motion Path feature to see the embedded content, and Inspect Element to see the code.

You can change Container ID, Resource folder, even the content of the output HTML in Document pane in the editor.

Regards

3 Likes