I've got a box in the middle of the screen:
.box {width: 20em;height; 20em;z-index: 10000;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);background-color: #fff;box-shadow: 4px 4px 80px #000};
When I resize the browser window, the box stays centered.
However, when I add a tweenMax.from, to slide the box from a corner of the screen.
var tl = new TimelineMax();
tween = TweenMax.from('.box', 2, {top: 0, left: 0, opacity: 0, scaleX: 0, scaleY: 0});
tl.add(tween);
The animation is fine, but when I shrink the browser window, the box doesn't stay centered. Instead, the box just remains in the same position. Any ideas?
Thanks