Jump to content
Search Community

Help with element positioning using GSAP JS

cwiens test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I am building my first simple banner using GSAP JS. Its a 300x250 ad. I have been using GSAP AS3 for years now so I know the syntax well. I normally use TweenLite.from. Trying to understand the best way to set x y positions. The idea here is that 6 cards cycle on and off the stage from left to right.  Here is what I have so far: 

http://cwiens.com/curt/html5/cardbanner.html

 

I can force the second card into position through setting negative margins in the CSS. This doesnt seem like the right way to do it through. Any help would be appreciated.

Link to comment
Share on other sites

Hello and Welcome to The Forums..

 

Have you tried setting the #demo id to position:relative .. and then set its children div's position property to position:absolute.. which takes the element out of the document flow.. and then it will cause the cards to stack over each other..  and then you can keep them in the  same position when animating in and out..

/* line 11 */
#demo {
    background-image: url("img/background_wood.jpg");
    height: 250px;
    width: 300px;
    /* children will be relative to this parent #demo */
    position: relative;
}

/* line 18 */
.portrait {
    float: left;
    height: 208px;
    width: 150px;
    margin-left: 60px;
    margin-right: 10px;
    /* children will now be out of the document flow and can stack */
    position: absolute;
}

so instead of using floats and margins you can use positioning, and then you use the top and left  property to position the element as you want.. and then you can use z-index to control stack order.

 

alternatively, and much better would be to use transforms... like animating the x, y, and z properties instead of animating the positioning top and left properties

 

http://www.greensock.com/css3/

http://www.greensock.com/gsap-js/

 

does this what you mean or want?

 

and/or you can provide a codepen or jsfiddle and as example and we can help you a little better :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...