When designing Vidyard Actions (formally known as Events), you may wish to add your own animation transitions into the CSS.
An issue that you may find is that if you are using an Action as a mid or post roll, the animations will have already run by the time you see the Action on the Player. This is because the Action loads with the player, but is hidden until the time you've set to display it is reached.
To get around this issue, you will need to use a function that injects the HTML at the time of the Action showing.
Assuming that you already have the HTML set, here are some steps to make this function as intended. Note that the Action preview will go blank once this is added, so test on a sharing page once completed.
1. Add the following into the very first line of your HTML, before the rest of the code:
<script type="text/javascript">
window.addEventListener('showEvent',function(){
var htmltext =
2. Place all of your HTML, including any styles and scripts. into the 'htmltext' variable, between single quotes, followed by ; e.g.
var htmltext = '<style>p{color:blue;}</style><p>Some Text</p>';
3. Complete the code with the following lines. This will empty the HTML when the Action closes in order to start again if the Action gets re-triggered.
$("html").append(htmltext);
});
window.addEventListener('closeEvent',function(){$("html").empty();});
</script>
See code example here:
https://codepen.io/Vidyard/pen/xxbbweW
Working example:
https://share.vidyard.com/watch/GSkqM79cr7m54FtGL8Y5HY?