Divs not matching animation matrix

[kathryn.crawford]

I'm trying to tween these images so that they stack on top of one another, at x:0, y:0. The matrix looks right, but they are only moving halfway to the left. No idea why!

 

See the Pen gaZZaE by jonathan (@jonathan) on CodePen

[kathryn.crawford]

Realized it was the css property "text-align: center" messing me up. 

[Jonathan]

Hello kathryn.crawford,

 

Be careful about depending on text-align center to fix this issue from your original codpen cross browser. Since text-align: center is calculated differently in each browser.

 

Better to just add in your CSS top:0; and left:0; on #banner, img, #donate, #frame1, and #frame2.. that use position: absolute.

 

See the Pen wKRQYN by jonathan (@jonathan) on CodePen

 

According to the CSS spec for top, bottom, right, and left. Their initial value is auto. So it is always best practice to set them to zero (0) if filling your parent element.

 

As a rule of thumb, anytime you use position absolute or position fixed. You must declare your top or bottom and your left or right CSS property. And don't forget to add position relative to your parent #ad div. So this way your absolutely positioned children will be absolutely positioned relative to their parent (#ad).

 

You basically first set up your scene:

• By setting position relative on your parent div #ad
• Then on the #ad div's children you use position absolute along with top or bottom and left or right CSS properties.
• Then you animate with GSAP using CSS transforms x, y, and z

Once you setup your scene this way, animating is much more easy and fun