Scale animation to fit parent container - not window size.

[Ryan_Cheetham]

Hi All,

I have an animation that I am trying to embed into a bootstrap template, but window size is being applied to the canvas rather than parent container (div).

Therefore the animation is huge and flowing outside of the column.

I have exported the animation with the following selected:

- Make responsive (by width)

- Scale to fill visible area (fit in view)

All the solutions I can find for this are based on Edge animate (bScaleToParent) and not Animate CC.

Any help would be much appreciated, thanks!

[luiss70215192 · Accepted solution]

Hi Ryan,

It's a rude solution but works:

You must edit the script in the html file that Animate publish whatever name you have.

//create an div with an id that wraps all animate's divs - animation container, in my case a div#parentContainer

1.-  Inside the resizeCanvas function: (at the beginning )

function resizeCanvas() {

//get the parent element

var parent = document.getElementById("parentContainer");

//you can set the width of the parent container with css, but you must add this line in order to maintain the ratio in proportion with parent width of animate Stage:

//in my case my stage's size is 550x400 , add your size in the formula

parent.style.height= (parent.clientWidth * (400 / 550)+"px");

2.- in this line switch with your parent's size:

// var iw = window.innerWidth, ih=window.innerHeight; this is what we don't want

put this line instead, the parent size.

var iw = parentclientWidth, ih= parent.clientHeight;   

3.- Finally in the call of makeResponsive function, at the bottom of the script use this parameters:

makeResponsive(true,"both",true,1);

it works changing 4 lines of code in the main script of Animate CC.

Sorry for my English.

I hope it helps!
Thanks!

[egeekdad]

thank you, I can confirm this works solution perfectly!

[slog70]

Thanks luiss70215192, it works!

I was searching for this solution from ages!

Why the Hell adobe doesn't fix that?

Question: is there a way to integrate this fix in the animate html template? I'm not good as you are at programming...

Tony

[Olliebare]

Does anyone have an example of this in situ? I've tried adding/replacing the 4 lines of code. But when I do it the animation disappears completely and the width of the page explodes.

[T.Kleine]

Unfortunately uiss70215192 has forgotten a dotting in step 2.
Here is the correct code:
var iw = parent.clientWidth, ih= parent.clientHeight;

[JohnJackG]

Thanks for this!  This solution works perfectly to make animations respect their parent container.

I have created a small .php/.js script which automates this process.  If anybody would like this script, let me know and I'll send it to you.  It basically lets you drag & drop the .js and .html files that Animate generates, and then it returns two hacked .js and .html files, according to the instructions posted here, which releases the animation from the window canvas size, and allows you to place it inside of whatever parent container you want, without using iframes.

Without this php/js solution, Animate is useless to me, because of the 'speedbump' of having to hack the generated files that Animate publishes.

With this php/js script, it streamlines the process of having to manually edit the files, and it restores the standard functionality of HTML and CSS.

[Yago268414784rud]

Hello John, thank you very much, I would appreciate a lot your script.

[JohnJackG]

Nevermind, I have tested it today and it is not working.  Maybe there was an update in the Animate software since this solution was found?  If this is really important to anyone, please explain why, and I'll find the time to update the script so it works again.

[kglad]

@JohnJackG 

exactly what are you doing and what are you trying to accomplish?

[JohnJackG]

@kglad  thanks for asking, but it's nothing I'm looking for support for, though I'll explain it since you asked.

@Yago268414784rud has asked me to share a script which I had made a little over a year ago, which incorporated the OP's answer into an automated webpage that uses PHP and JS to allow me to upload my Animate files, to have the script process them and 'fix' them so that I can embed them into any DOM container on any given page I'm using an Animate animation in.

I had typed out a response to Yago saying, "Here's the script, here's how you use it, here's how you download the files to use on your own server, etc..." and at first when I tested the script earlier today, it appeared to work fine, but when I came back and looked closer, I noticed something wasn't working right, so I took it down and made the offer that if it's something that would really help someone else, I would update the script and make it work again.

Hopefully, one day Adobe will update the Animate software and this kind of 'fix' won't be needed.

[kglad]

ok

[Yago268414784rud]

Thank you anyway!!! The fix explained in the post works fine, so it's solved.

[Yago268414784rud]

I got it!!!! Thank you very much @luiss70215192 !!! I'm very happy!!!! XD

[Lalo Mota]

After correcting the line "var iw = parent.clientWidth, ih= parent.clientHeight;" it wasn't working yet because of the last step, I just left it this way:

AdobeAn.makeResponsive(true,'both',false,1,[canvas,anim_container,dom_overlay_container]);

and everything worked like charm!