Hi there, I have a question.
Within a site for a costumer, build with Wordpress and the Elementor plugin I want to embed different animations per page. One animation is displayed at full screen and one is used on mobile view.
Now i have it working with iframes, but i prefer to embed it with DIV and scripts.
is it possible to set multiple animations withe the embedding this way?
I see a tutorial here Add exported files to wordpress - #2 by ToanLS it is not clear to me what to do then i have multiple animations on one page.
Any help is welcome.
Of course i have every animation in a separate html5 output folder on the server.
It’s possible to embed multiple Saola Animate animations into different DIV elements on one page. You can take a look at this tutorial for more information:
For the “Change the Player Script” section, you only need to perform this step once to apply it to all animations on the page.
Hi! thank you for your quick response!
so the content of
can be used for the different animations? that are stored within different folders on the server?
I only have to point to one of the slplayer.js in only one of the folders. The script is equal for all the animations?
in the div script of the help page you are pointing at there is a part:
// 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};
where is it used for? My animation has a different shape and parameters.
Do i somewhere have to pre-define the size of the div and the size of the used scenes from the animation?
-and my final question: because i used the iframe construction before, i changed the links with javascript opening the link to _parrent (to open the link of the page within the wordpress level of navigation; outside the iframe) I have to set it back to normal links i guess?
It seems that in the link you provided there is a error in the code. Please give it a look
in this link the code seems right:
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:
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.
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>
For the rest the solution is working fine!
Thank you!
