Skip to main content
Ryan_Cheetham
Ryan_Cheetham
New Participant
April 4, 2017
Answered

Scale animation to fit parent container - not window size.

  • April 4, 2017
  • 2 replies
  • 5835 views

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!

    This topic has been closed for replies.
    Correct answer luiss70215192

    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!

    2 replies

    Lalo Mota
    Lalo Mota
    New Participant
    July 9, 2021

    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!

    luiss70215192
    luiss70215192Correct answer
    New Participant
    February 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#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!

    E
    egeekdad
    New Participant
    June 21, 2018

    thank you, I can confirm this works solution perfectly!

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices