"Injecting" a codepen html css js animation in to prototype?

#1

Hey folks

I’ve read previous things about hacky ways of injecting html/css/js in to Axure prototypes, but am wondering if anyone’s tried to do this to embed, for example, an animation from codepen?

I’m looking to imitate a really nice confetti animation our product does in a prototype I’m working on.

For example, showing this one: https://codepen.io/iprodev/pen/azpWBr would be great, but I’m not sure how it’s done. Ideally it would show upon show of some dynamic panel.

I’ll be using Axure Share so happy to go the plugin route.

Thanks for any tips offered!

#2

The plugin route is probably the most straightforward, although there are other ways of doing it without it a plugin.

http://dkgyey.axshare.com/home.html

This uses two plugins - one with the styles and JS needed, and then one that injects the html into a dynamic panel. The attached file has two pages showing how to create the plugins.

confetti.rp (129.7 KB)

#3

Holy smokes.

Thanks so much! I’ll take a look at your files over the weekend!

#4

Well I tried the method suggested by the AxFu Master… and failed. I realized that Axure v.9 is slightly different from v.8 specifically in where to place the css and JS code when in the plugin creator tool. Minor but major to me.
could you provide some assistance please.

Here is the codepen link.

ambient test.rp (335.0 KB)

closed #5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.