GSAP - On Page Image Animation

by bizamajig

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
    <div id="caption"></div>
    <img id="photo" src="http://www.chicagonow.com/dennis-byrnes-barbershop/files/2014/03/Putin.jpg">

CSS

#caption {
    width: 100px;
    height: 100px;
    background-color: #f72;
}
img {
    display: block;
}

JavaScript

var $photo = $( '#photo' ); 
    TweenMax.to( $photo, 2.5, {width:100} );  // this works
    TweenMax.to( $photo, 4, {x:300} );
    
    var $caption = $( '#caption' );
    TweenMax.to( $caption, 1, {x:200} )
    TweenMax.to( $caption, 1, {y:100} );