DOOMinik
DOOMinik's Achievements
0
Reputation
-
I got you . Thank you for explanation.
-
Hi. I have problem to lunch the same animation again. First animation is moving elements from top, to middle of the page and is launched on page load and it's working fine. Next I have two buttons. First "Move up" launch animation move elements to the top of the page and it's working fine as well. And finally I have another button "Move down". This button should start animation that move elements again from the top page to the middle again, but it doesn't work. Absolutely nothing happens. Can someone tell me why. Bellow my code. Thank you <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css"> <script src="TweenMax.min.js"></script> </head> <body> <div class="anim"></div> <div class="anim"></div> <div class="anim"></div> <div class="anim"></div> <div class="anim"></div> <div class="anim"></div> <div class="anim"></div> <input type="button" id="Move_up" value="Move up"> <input type="button" id="Move_down" value="Move down"> <script src="script.js"></script> </body> </html> .anim { width: 100px; height:50px; margin: 5px; position: relative; background-color: aquamarine; float: left; top: 500px; } #Move_up { position: absolute; bottom: 100px; left: 10px; } #Move_down { position: absolute; bottom: 100px; right: 10px; } TweenMax.staggerFrom(".anim",0.5,{y:-500},0.2); var anim1 = document.getElementById("Move_up"); anim1.addEventListener("click",function(){TweenMax.staggerTo(".anim",0.5,{y:-500},0.2);},false); var anim2 = document.getElementById("Move_down"); anim2.addEventListener("click",function(){TweenMax.staggerFrom(".anim",0.5,{y:-500},0.2);},false);