shtse8

Thanks for your answer. Setting visibility:hidden is possible unless there is no flash on the box. Otherwise, the flash is still clickable even the visibility is hidden (flash is always on top) and that is the reason why I need to set it do display:none. How about just apply the non-tweenable properties at the beginning of the tween? it should work too. For my best understanding, the current state cannot be checked because the dom is display:none, so if we set the display:block in the option, and we know the dom is none now, just apply the display:block on the object and get the current state after. According to the description, we can set display: block property and it will be applied at the beginning of the tween. TweenLite.to("#div", 0.5, {x: '0%', display: 'block' }); but it doesn't work on my case. I have to set it before the animation to make this work. TweenLite.set("#div", { display: 'block' }); TweenLite.to("#div", 0.5, { x: '0%' }); For my best knowledge, it should be the same as the description - set the display:block at the beginning of the tween. But why it doesn't work if we make it into one line? but it works if we set the non-tweenable manually first. Thanks.

Hi, Thanks for your worked version, and that's also my using version too. But I want to set the x value using css first because css is loaded before js. So the box will not be shown after the page is loaded. If I set the box using js, the box will be shown for 1 second until the js is loaded. And for coding style, I don't want to set the same property for twice. one is for css and one is for js. So it would be great if we can set the display:block to the option for working. as you can see the blue box version is working too, and we do not need to set the property twice. but only need to separate the display and xPercent into two lines. Thanks for your help .

http://codepen.io/shtse8/pen/ZbzgWb You can test it here. red box is the buggy version. blue box is worked version. for the first time, the red box animation is missing. I have made the button can be pressed many time for the later animation. Thanks.

I have the same problem with the latest version of tweenLite, try this: css: #div { display: none; transform: translateX(-100%); } js: TweenLite.to("#div", 0.5, {ease: Back.easeInOutSine, force3D: true, x: '0%', display: 'block' }); worked version: TweenLite.set("#div", { display: 'block' }); TweenLite.to("#div", 0.5, {ease: Back.easeInOutSine, force3D: true, x: '0%' }); My guess: because the dom is default hidden, so gsap cannot get the original value for the first time.