$(document).ready(function() {});
is a jQuery function, so you would have to add a jQuery reference before you try to run it.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
var footer = document.getElementById("footer");
var topper = document.getElementById("topper");
var box = document.getElementById("photo");
$(document).ready(function() {
TweenMax.from(box, 4, {height:"200px", width:"200px", top:"50%", left:"50%", marginTop:"-100px", marginLeft:"-100px", ease:Power3.easeOut}); // <-- edited Power3.easeIn to Power3.easeOut
TweenMax.from(topper, 4, {top:"50%", left:"50%", marginTop:"-100px", marginLeft:"-105px", width:"210px", ease:Power3.easeOut});
TweenMax.from(footer, 4, {bottom:"50%", left:"50%", marginBottom:"-100px", marginLeft:"-105px", width:"210px", ease:Power3.easeOut});
});
</script>
EDIT: updated to change
TweenMax.from(box, 4, {height:"200px", width:"200px", top:"50%", left:"50%", marginTop:"-100px", marginLeft:"-100px", ease:Power3.easeIn});
to
TweenMax.from(box, 4, {height:"200px", width:"200px", top:"50%", left:"50%", marginTop:"-100px", marginLeft:"-100px", ease:Power3.easeOut});