Can't position objects with GSAP

StackOverflow https://stackoverflow.com/questions/22800032

  •  25-06-2023
  •  | 
  •  

Question

I'm taking real simple examples from their documentation in one I re-size and re-position a photo. The re-size part works fine but it won't re-position. Here's my code: 

<head>
<meta charset="UTF-8">
<title>animate</title>
<style type="text/css">
    #test { width: 100px; height: 100px; background-color: #f72; }
</style>

    <!--CDN link for the latest TweenMax-->
**<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>**
</head>

<body>
    **<div id="test"></div>
    <img id="photo" src="Putin.jpg">**

<script>
    **var photo = document.getElementById("photo"); 
    TweenLite.to(photo, 2.5, {width:100});  // this works
    TweenLite.to(photo, 4, {left:300});   // this does nothing

    var thing = document.getElementById('test');
    TweenLite.to(thing, 1, {left:200});   // this does nothing
    TweenLite.to(thing, 1, {top:100});    // this does nothing**
</script>

</body>

you can run it here: http://www.jimslounge.com/gsap_test/

Was it helpful?

Solution

Updated:

I would always wait until the window has loaded before executing code that relies on a external libraries:

window.onload = function(){
    var photo = document.getElementById("photo"); 
    TweenMax.to(photo, 4, {x:300});
}

Secondly, you are loading the TweenMax library, so you need to use TweenMax instead of TweenLite

Thirdly, besides not quite being sure if you need to define your block as position absolute when not animating the padding or margin, you should definitely pass the x instead of left attribute

TweenMax.to(photo, 4, {x:300});

Give it a go and let me know if this helps

See a working example here: http://jsfiddle.net/Hitbox/QbyCU/1/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top