Live
x
<body> <div class="circle"></div> <div class="circle2"></div> <div class="circle3"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script> </body>
Live
xxxxxxxxxx14
div{ height:40px; width:40px; border-radius:50%;}.circle{ background-color:blue;}.circle2{ background-color:purple;}.circle3{ background-color:black;}
Live
xxxxxxxxxx21
gsap.to(".circle", { duration: 1, x: 200, ease:'Bounce.easeOut'});gsap.to(".circle2", { duration: 1, delay:.5, x: 200, ease:"Elastic.easeOut"});gsap.to(".circle3", { duration: 1, delay:1, x: 200, ease:"Circ.easeOut"});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.