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.

[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!