Adapt Learning Community: CSS keyframes

Hiya

Is it possible to put a CSS keyframes animation within any of the standard Adapt components or blocks?

Appreciate keyframes have also have restricted browser compatibility at the best of times,

Thanks,

Nicola

I've found the easiest way to add an animation is to use the adapt-contrib-responsiveIframe and just embed a seamless animation from google designer or edge animate or whatever

Show parent | Reply

Additionally, the same component loads captivate and Storyline outputs too.

Show parent | Reply

Let's liven up this post again. I successfully managed to add a Storyline output to a course with the responsiveIFrame component.

But now I wonder if there is a possibility to access values from the storylinecourse like variables.

Would appreciate any ideas.

Best regards,

Petra

Show parent | Reply

Well first stage would be to do a little poking around in Storyline to see where exactly it stores those custom variables.

I can't remember if you can execute JavaScript from inside Storyline or not? If so, one possibility is to execute some code that takes whatever variables you want to access and passes them out.

You'll probably also want to inject a reference to a function or object in Adapt into the iframe so that any code you put in Storyline has something to talk back to - something like this:

this.$('iframe').contents()[0].defaultView.someFunction = _.bind(this.someFunction, this);

worked for me

Show parent | Reply

Storyline enables you to execute javascript within it’s triggers. So you can trigger custom jQuery events. Eg:

parent.window.$(parent.window.document).trigger('event-name', [event-data]);

Inside Adapt you can listen to this events and execute some functions, manipulate the Dom or do whatever. For instance within a View:

$(document).on(‘event-name’, this.someFunction());

I took the responsiveIframe component as a foundation and created a component that acts as an interface to an embedded storyline course. Right now, the component does have the following functionality (Demo):

The embedded Storyline course tells Adapt when to set Page Level progress
Add CSS-classes to show / hide Components based on Storyline
Pass Variables from Storyline to Adapt

Using the Storyline Variables inside Adapt:

Right now I trigger an Adapt Event with a storyline prefix to communicate the variables inside Adapt. Is there a way add this variables to Adapt so that all components could use them? Is there a Model that can be accessed by any Component?

Any other ideas or use cases are highly welcome.

Show parent | Reply

You could put css keyframe animation in a component's less file, one of the theme less files.

The @keyframe part that defines the animation must go in a stylesheet or style tag but the animation property that calls the defined animation can go in inline-style in the body of a component as body attributes can contain html.

I think where you put the keyframe definition should be decided based on where you want to use the animation, if it will be reused etc.

I haven't tried this but it might even be possible to add a new less file for keyframes and animations in the theme's less folder

Show parent | Reply

We've successfully managed to embed <canvas> animations created using Adobe Flash CC into Adapt content by using an iframe component - requires IE9 minimum of course but works very well.

Canvas animations have the benefit of being by far and away the most reliable for cross-browser support.

Presumably with a little extra work you could also create an .swf output of the animation for IE8. You would have to add in any interactivity all over again because it would need to be in ActionScript rather than JavaScript, but it's feasible.

Show parent | Reply