Javascript TweenMax not working

Question

これは初めてのTweenMax JavaScriptでの作業です。私は最終的にイメージとテキストを保持する丸いエッジを持つ "カード"を作成する関数を作成しようとしています。今のところ、私はちょうど、自分のタグの中の特定の大きさと場所で、内部の画像（クリッピングはこの時点では無関係です）を作りたいと思っています。

今のところ、x/y値に関係なく、（0、0）に画像が表示され、親ブロックからの拡大/縮小や丸みのあるエッジや影はありません。 TweenMaxが機能していないか、何か正しいことをしていないと思っています。

cards.js 体HTMLので

mainView = document.getElementById('mainView'); 

create_card(25, 25, "image.png"); 

function create_card(theX, theY, img){ 
    //CARD VARS 
    cardElement = document.createElement('div'); 
    cardElement.setAttribute('class', 'card'); 
    cardImage = document.createElement('img'); 
    cardImage.setAttribute('src', img); 
    cardImage.setAttribute('class', 'image'); 

    //LAYOUTS 
    TweenMax.set(".card", { 
     position:'absolute', 
     display: 'block', 
     x: theX, 
     y: theY, 
     width:140, 
     height:140, 
     backgroundColor:'#ff0000', 
     borderRadius:2, 
     overflow:'hidden', 
     scale:1, 
     boxShadow:'5px 5px 5px #ff7f00' 
    }); 

    //APPEND CARD TO STAGE 
    cardElement.appendChild(cardImage); 
    mainView.appendChild(cardElement); 
} 

：

<div id="wrapper"> 
    <div id="mainView" class="mainView"></div> 
</div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script> 
<script src="javascript/cards.js"></script> 

CSSスタイルシート（私はこれは関係ないかもしれないが徹底的だと思います）：

body{ 
    background-color: #888888; 
    margin: 0 0 0 0; 
} 

#wrapper { 
    margin-left: 100px; 
} 

#mainView { 
    margin-left: auto; 
    margin-right: auto; 
    width: 1000px; 
    height: 100%; 
    background-color: #444444; 
    box-shadow: 0px 0px 10px #222222; 
} 

これを1つの質問にコンパイルする：TweenMaxが動作しないのはなぜですか？これと同様

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script> 

：中HTTPSへのhttpを変えたものを私のために働い

有効回答や貢献をするすべての人:)

Answer 1

にIアップ投票/マークの答え：

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script> 

このようなシンプルな解決策があります。私はこれをかなり前に見つけましたが、おそらく誰かがこの便利を見つけるでしょう:)