GSAP TweenLite Rotation but not animate

Question

I am a little new to using TweenLite. As you will see in the example, I have a div that I slide up which is all good, and I want to rotate the div itself so am using rotation 18deg however, can rotate this before the animation as appears it animated the rotation as it slides up. So I need to rotate out of view.

 $(document).ready(function(){ TweenLite.to("#slide_one .background", 0.4, // set the speed {rotation:"18deg", top:"0" // set the angel and end position }); }); 

 .container { display: block; width: 300px; height: 250px; border: 1px solid #000000; overflow: hidden; position: relative; } .background { position: relative; display: block; width: 200%; height: 200%; left: -100%; bottom: -300px; } .background.dark-blue { background: #071D49; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div id="slide_one"> <div class="background dark-blue"></div> </div> </div> 

Answer 1

对于任何想知道您必须使用set的解决方案的人，请不要设置动画

TweenLite.set(slide_one, { rotation: "18deg" });