creating different animations for desktop and mobile?

[slog70]

Hello all,

I know Animate can help creating responsive animations.

But I need to create a completely different animation for desktop and mobile, since the animation on desktop should be rendered horizontally and on mobile it should be rendered vertically (moving content accordingly).

Is there a way to do this?

I would use the bootstrap framework on my page, so I can use the helper classes that can hide content based on device viewport width.

This way I would display animation1 on desktop and animation2 on mobile.

Would this work?

Or is there a better way to do this?

TIA

tony

[kdmemory · Accepted solution]

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

[slog70]

Hello Kalus,

thanks for your reply.

At long last I will use the iframe solution, since the animation should be displayed dynamically, based on the viewport width.

So, I'll load iframe1 if the viewport width is less than 560 or iframe2 if it's wider.

Bootstrap can handle the iframe responsive height with his classes ("embed-responsive embed-responsive-16by9", or 4by3 or by custom ratio).

So, the final code would be:

<!-- visible on desktop hidden on mobile>

<div class="hidden-xs">

<div class="embed-responsive embed-responsive-16by9">

  <iframe class="embed-responsive-item" src="iframe1.html"></iframe>

</div>

</div>

<!-- visible on mobile hidden on desktop>

<div class="visible-xs-inline (or inline-block...)">

<div class="embed-responsive embed-responsive-16by9">

  <iframe class="embed-responsive-item" src="iframe2.html"></iframe>

</div>

</div>

Ciao

Tony

[ClayUUID]

slog70  wrote

I know Animate can help creating responsive animations.

Animate has no native responsive functionality. What it calls "Responsive" in the publish settings is just scaling, which is not what responsive means. Adobe mislabeled this option, and refuses to correct it.