Hi Tony
Of course there are many ways to do this. But generally you are right, many Animate Canvas animations look too small on mobile devices. A canvas, even when made responsive in Animate's Publish Settings, has a defined width and height ratio. And it doesn't change the display order of contents like responsive frameworks for HTML/CSS do.
So, yeah, you have to build two versions, one vertically aligned which I call for the sake of an example your_slim_style_animation and one horizontally aligned which I call here your_wide_style_animation.
The rest of the work lies outside Animate CC. To offer a simple example (and for this you can surely use your bootstrap helper class, but I stick to plain javascript) let's assume you have an interactive link <a> in your HTML to direct to one of the two animation-documents depending on viewport width. Place this link like this:
<a href="#" onclick="defineLink()">See my Animation</a>
then in the same HTML document add in the <script> section:
<script>
defineLink = function () {
if (window.innerWidth < 560) {
window.location.href = "my_slim_style_animation.html";
} else {
window.location.href = "my_wide_style_animation.html";
}
};
</script>
You might add code to the <script> section if necessary. And set the window.innerWidth < 560 after your gusto.
Maybe this helps
Klaus
AdChoices