Using animation (HTML5 Canvas Document) in a slideshow

[adconceptw70469907]

Hello,

I want to use 3 different animations within a slideshow. For the slideshow I used the uikit and I embedded the animations in an iframe.

Everything works perfect, but the problem is that all 3 animations are loading on the same time. Because all of them include sound elements I can hear 3 different sounds while only the first animation is visible.

Is it possible to define something for the animations itself that the animation timeline starts playing only when the animation is visible?

Kind regards,

Regina

[kglad]

what's the uikit?

why do you mean by the animations are 'loading'?

[adconceptw70469907]

The uikit is a front-end framework developed in LESS & SASS based on html, css, javascript and jQuery. I do not know if this is an important information but I shared it just to be sure it is.

By 'loading' I mean that even if the animations are not shown together, all the content of the page loads at the same time. Before you are able to see a website all files have to be loaded by your browser in order to show the page properly.

Also this seems to be the problem because all three animations were loaded and played but only the first one is shown to the user. The second one replaced the first one after x seconds and so on (regular slideshow behavior).

[kglad]

i don't know anything about uikit so if that's part of the problem i can't help with that.

again, i don't know what you mean by 'load' when talking about adobe animate and html5.  with animate objects are displayed because they are added to keyframes either in the ide or by using js.  if you have 3 objects (eg, movieclips) with sound and animation and only one is present on frame 0 and playing, only it will be seen and heard.  the others should not be visible and they should have a stop() in their first frame (frame 0) and their sound should not start until the 2nd frame (frame 1) or later on their timeline.

[adconceptw70469907]

I do not think that the mentioned problem is a problem with the uikit.

Let me show you a code snippet, maybe this will explain my problem:

<div class="uk-slidenav-position" data-uk-slideshow="{autoplay:true}">

    <ul class="uk-slideshow">

       <li>

       <div class="wrapper">

    <div class="h_iframe">

        <img class="ratio" src="transparentem.png"/>

        <iframe src="slide01.html" frameborder="0" allowfullscreen></iframe>

    </div>

</div>

<div class="uk-overlay-panel"><div class="uk-container uk-container-center">

<div class="uk-grid headerarea">

<div class="uk-width-2-3 headlinewidthseperate headlineversionlarge" style="opacity: 1; padding: 5px; margin-top: 20px; z-index: 999999999;">

<div class="whitearea">

<h1 class="colordarkgreen" style="text-align: left;">HEADLINE</h1>

<p style="color: #676c6e !important; text-align: left;">Bodytext</p>

</div>

</div>

</div>

</div></div>

       </li>

       <li>

This is the first coding part of the slideshow. The file 'slide01.html' is the first animation, which is displayed to the user directly. Further in the code there is also a slide02.html and slide03.html which are also animations. So I did not build a whole slideshow in Adobe Animate CC, but I created 3 different animations, which are implemented separately. So there are 3 different html files within an iframe, which starts playing once the whole website is completely loaded.

[kglad · Accepted solution]

that's not an animate cc issue.

post in a js forum or google the issue:  it was answered here several months ago.