Scale animation to fit parent container - not window size.

New Here ,
Apr 04, 2017 Apr 04, 2017

Copy link to clipboard

Copied

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!

Views

3.3K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

New Here , Feb 24, 2018 Feb 24, 2018
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#parentContainer1.-  Inside the resizeCanvas function: (at the beginning )function resizeCanvas() {//get the parent elementvar parent = document.getElementById("parentContainer");//you can set the width of the parent container with css, but you must add this line in order to mai...

Likes

Translate

Translate
New Here ,
Feb 24, 2018 Feb 24, 2018

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 21, 2018 Jun 21, 2018

Copy link to clipboard

Copied

thank you, I can confirm this works solution perfectly!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 19, 2018 Sep 19, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 17, 2018 Nov 17, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 29, 2018 Nov 29, 2018

Copy link to clipboard

Copied

var iw = parent.clientWidth, ih= parent.clientHeight;

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 14, 2022 Jan 14, 2022

Copy link to clipboard

Copied

LATEST

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 08, 2021 Jul 08, 2021

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines