Search code examples
javascripthtmlcssgsap

Javascript TweenMax not working


This is my first time working with TweenMax in JavaScript. I'm trying to make a function that will create a "Card" with rounded edges that will eventually hold images and text. For now I just want to make one with an image inside (clipping is irrelevant at this point), at a certain size and location inside one of my tags.

Right now, all that this does is display the image at (0, 0) no matter the x/y value, there's no scaling or clipping from the parent block, and there's no rounded edges or shadow. So pretty much I'm thinking either my TweenMax is not working, or I'm not doing something right.

cards.js

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);
}

In the body of the HTML:

<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>

The CSS stylesheet (I think this might be irrelevant but to be thorough):

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;
}

So, to compile this into a single question: Why isn't my TweenMax working?

I up-vote/mark answer to all who make valid answers and contribution :)


Solution

  • What worked for me was changing https to http in:

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

    Like so:

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

    Such a simple solution hahaha. I found this out quite a while ago, but maybe someone will find this useful :)