Quantcast
Channel: Adobe Community : All Content - Edge Animate
Viewing all articles
Browse latest Browse all 9897

Responsive animation with script - not ok in Wordpress

$
0
0

Hi,

 

I ahve been following Adobe Product Manager Sarah Justine's tutorial (http://sarahjustine.com) on how to make an animation responsive. She has created a script that seems to work perfectly when you resize your browser or use a handheld device. Script is inserted into the "Stage" component:

 

(choose compositionReady in dropdown and add code below)

 

var stageHeight = sym.$('Stage').height(); // Set a variable for the height of the stage

 

 

sym.$("#Stage").css({ // Set the transform origin so we always scale to the top left corner of the stage

"transform-origin":"0 0",

"-ms-transform-origin":"0 0",

"-webkit-transform-origin":"0 0",

"-moz-transform-origin":"0 0",

"-o-transform-origin":"0 0"

});

 

 

function scaleStage() {

    var stage = sym.$('Stage'); // Set a reusable variable to reference the stage

    var parent = sym.$('Stage').parent(); // Set a reusable variable to reference the parent container of the stage

 

 

    var parentWidth = stage.parent().width(); // Get the parent of the stage width

    var stageWidth = stage.width(); // Get the stage width

    var desiredWidth = Math.round(parentWidth * 1); // Set the new width of the stage as it scales

    var rescale = (desiredWidth / stageWidth); // Set a variable to calculate the new width of the stage as it scales

 

 

// Rescale the stage!

           stage.css('transform', 'scale(' + rescale + ')');

    stage.css(  '-o-transform', 'scale(' + rescale + ')');

           stage.css('-ms-transform', 'scale(' + rescale + ')');

    stage.css('-webkit-transform', 'scale(' + rescale + ')');

           stage.css('-moz-transform', 'scale(' + rescale + ')');

    stage.css('-o-transform', 'scale(' + rescale + ')');

    parent.height(stageHeight * rescale); // Reset the height of the parent container so the objects below it will reflow as the height adjusts

}

 

 

// Make it happen when the browser resizes

$(window).on('resize', function(){

           scaleStage();

});

 

 

// Make it happen when the page first loads

$(document).ready(function(){

    scaleStage();

});

 

 

 

My problem is that I use Wordpress and the Edge Animate plug-in and when I insert the animation there the script seems to do nothing. I'm not a coder so I have no idea what might be happening. I'm going to post this on the Wordpress plug-in support page and see is the developer has any ideas. I'll report back about that.

 

Any help would be greatly appreciated since this script seems very useful!

 

 

Regards

 

Johan


Viewing all articles
Browse latest Browse all 9897

Trending Articles