Animations within slides happen before slide is shown, wishful thinking?

[vif-maureen]

This one is a long-shot but just in case you have any thoughts. I am using iframes within some slides as the easiest way to show things like animated bar charts, or SVG animations.

I'm using iframes (within the same domain) because this cuts down on the number of javascripts that need to be called from within Reveal for various libraries, i.e. Chart.js, Google charts etc, svg animation scripts, and it seems simpler just to make these be simple html pages in the same directory as index.html

I've spent 3 days trying to figure out how to make it so the animations on these slides don't run until that slide is in the viewport. I know there are ways with js to detect if something is in the viewport, but none of these plugins seem to work.

What I finally came up with is to have the iframes' src be set to nothing, and dynamically load them based on the class change of the section. For example:

<section class="chart_platform"> <iframe src width="900" height="350" class="effective-platform"/>...

and since the current slide gets the class 'present' added, I want to evoke the iframe src to then load, which will run the animation. I found a jQuery plugin to watch for CSS changes: https://github.com/RickStrahl/jquery-watch and added it into header.html

In the Chrome console I can totally get this working perfectly by passing

var el = $(".chart_platform.past, .chart_platform.future");
// hook up the watcher
el.watch({
    // specify CSS styles or attribute names to monitor
    properties: "attr_class",

    // callback function when a change is detected
    callback: function(data, i) {
        var propChanged = data.props[i];
        var newValue = data.vals[i];

        var el = this;
        var el$ = $(this);
        $('section.chart_platform.present iframe.effective-platform').attr('src', 'effective-platform.html');
        // do what you need based on changes
        // or do your own checks
    }
});

however it won't work when adding it anywhere else in the real site.

I realize this is beyond the scope of your work but thought you might know of a way to accomplish this. It would also work to just trigger a reload of the iframe src when the class changes to 'present'.

As a side note, the original reveal.js has the ability to add 'data-autoplay' to a media element to auto play a video. I'm wondering if there might be a similar way to add something like a 'data-load' or 'data-reload' to iframes, as this would also give the desired results.

Thanks so much again for this cool project and your willingness to add a few new features!

[vif-maureen]

UPDATE: I think I got this one solved.

Turns out Reveal.js already provides for this with the data-state attribute.

However, it still requires added js in the footer so I am hoping that feature won't be too difficult.

I need to call it right before the closing body tag and after the Reveal initialization.

[pedantic-git]

Closing as solved by #27, then!