Having trouble animating a jpg

[pcdavis]

I am learning GSAP by following your YouTube tutorial "Getting Started Quickly with GSAP".  I am trying to animate a jpg across the screen but am getting no joy. Could someoen take a look at my codepen and tell me what I'm doing wrong?  Sorry for the newbie question.

 

Paul

See the Pen wKBVex by pcdavis (@pcdavis) on CodePen

[ektorp]

you simply need to set the position attribute for your image.

 

just change your img css to the following and you should be good:

 

img {

  position: relative;

  display: block;

  width:200px;

}

[Rodrigo]

Hi Paul and welcome to the GreenSock fourms.

 

As ektorp mentioned when animating position properties such as left, top, margins and paddings, the element being animated has to have a position property as well, whether is relative, absolute or fixed.

 

Another option is to use transforms, which don't depend on the element having a position set. So in your case the code will be like this:

TweenMax.to(".soccer", 2, {x:500});

That also will kick the auto force3D feature of the CSS Plugin, which creates a translate 3d in order to pass it to the GPU (so it's hardware accelerated) when the animation starts and then removes it when the animation is completed. This makes the animation far smoother.

 

Happy Tweening!!

[pcdavis]

You guys are awesome. Thanks so much for the help!