piyush
piyush's Achievements
0
Reputation
-
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="js/main.js"></script> </head> <body> <h1><strong>Green<span>Sock</span></strong> - TweenLite</h1> <div id="box"> <div class="boxSmall"></div> <div class="boxSmall boxTiny"></div> </div> </body> </html> this is my index file // 1. Create a variable var $box = $('#box'); // 2. Create a First .to() Tween // TweenLite.to($box, 0.7, {left: 0, x: 0}); // 3. Create a .from() Tween // TweenLite.from($box, 2, {x: '-=200px', autoAlpha: 0}); // 4. Create a .set() Tween //TweenLite.set($box, {x: '-=200px', scale: 0.3}); //TweenLite.set($box, {x: '+=100px', scale: 0.6}); //TweenLite.set($box, {x: '-50%', scale: 1}); // 5. Create a .fromTo() Tween //TweenLite.fromTo($box, 2, {x: '-=200px'}, {x: 150}); // 6. Easing TweenLite.fromTo($box, 2, {x: '-=200px'}, {x: 150, ease:Power4.easeInOut, onStart: start, onUpdate: update, onComplete: complete}); TweenLite.to($box, 0.4, {top: '100%', y: '-100%', ease:Bounce.easeOut, delay: 2}); TweenLite.to($box, 0.7, {x: '-=200px', y: '-100%', ease:Back.easeInOut, delay: 3}); TweenLite.to($box, 0.8, {x: '-=200px', y: '-100%', ease:Back.easeInOut, delay: 4.2}); TweenLite.to($box, 2.5, {top: '50%', y: '-50%', ease:Power0.easeNone, delay: 5}); TweenLite.to($box, 2.5, {x: '+=400px', ease:Elastic.easeInOut, delay: 7.7}); TweenLite.to($box, 2.5, {x: '-=400px', rotation: -720, ease: SlowMo.ease.config(0.1, 0.7, false), delay: 10.4}); // 7. Callback functions function start(){ console.log('start'); } function update(){ console.log('animating'); } function complete(){ console.log('end'); } this is the javascript html, body { height: 100%; } body { background-color: #262626; font-family: 'Open Sans', sans-serif; overflow: hidden; } h1 { font-size: 16px; width: 300px; color: #838484; font-weight: 300; text-align: center; span { color: #89c540; } strong { color: #fff; } position: absolute; top: 50%; left: 50%; transform: translate(-50%, -180px); padding: 10px 20px; border: 1px solid transparentize(white, .7); } #box { background-color: #88ce02; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; transform: translate(-50%, -50%); z-index: 1; } .boxSmall { position: absolute; background-color: #70a40b; position: absolute; bottom: 0; left: 0; width: 25px; height: 75px; z-index: 2; } .boxTiny { background-color: #577a14; height: 50px; bottom: 0; right: 0; left: auto; z-index: 3; } and this is the css part sorry for asking such a silly question in the forum actually i copied these codes from codepen and pasted in notepad to see the results in browser but no animation plays and also there is no error in console