img rotate and vanish

[cjebert]

I am very new here and am working on an assignment for school.  It is basically just to animate something using Greensock.

 

Now I might have bit off more than I could chew but I was wondering, on the getting started video at about the 5 min point the caped guy "logo" rotates across the page and gets smaller.  What I would like to do is take my little Yokai watch guy roll from left to right and then vanish.  Do I need to be a member to do this? 

 

Also do I want to do this inline in the html file? Or create a separate js file?  I have tried downloading the GSAP files and pointing to them as well as using the online library.  

 

This little guy doesn't want to do anything. He is just there and doesn't move.

 

I have tried every way imaginable to no avail. I have reverted back to where I started.

 

HTML: index

<div id="rockabelly" style="transform: matrix(1, 0, 0, 1, 50, 0);"></div>

CSS: stylesheet:

#rockabelly{
   position: relative;
   width: 500px;
   height: 500px;
   background: url(http://yokaiwatchfans.com/mediawiki/images/5/5c/Rockabelly1.png)no-repeat;
}

js:

TweenMax.to(".rockabelly", 10, {x:50, rotation:360});

[ohem]

 

I am very new here and am working on an assignment for school.  It is basically just to animate something using Greensock.

 

Now I might have bit off more than I could chew but I was wondering, on the getting started video at about the 5 min point the caped guy "logo" rotates across the page and gets smaller.  What I would like to do is take my little Yokai watch guy roll from left to right and then vanish.  Do I need to be a member to do this? 

 

Also do I want to do this inline in the html file? Or create a separate js file?  I have tried downloading the GSAP files and pointing to them as well as using the online library.  

 

This little guy doesn't want to do anything. He is just there and doesn't move.

 

I have tried every way imaginable to no avail. I have reverted back to where I started.

 

HTML: index

<div id="rockabelly" style="transform: matrix(1, 0, 0, 1, 50, 0);"></div>

 

CSS: stylesheet

#rockabelly{

position: relative;

width: 500px;

height: 500px;

background: url(http://yokaiwatchfans.com/mediawiki/images/5/5c/Rockabelly1.png)no-repeat;

}

js:

TweenMax.to(".rockabelly", 10, {x:50, rotation:360});

 

Change 

TweenMax.to(".rockabelly", 10, {x:50, rotation:360});

 to 

TweenMax.to("#rockabelly", 10, {x:50, rotation:360});

It should be a # not a . because you're tweening an ID not a class name.

 

See the Pen rePJyw by anon (@anon) on CodePen