Live
x
<body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js" integrity="sha512-cOH8ndwGgPo+K7pTvMrqYbmI8u8k6Sho3js0gOqVWTmQMlLIi6TbqGWRTpf1ga8ci9H3iPsvDLr4X7xwhC/+DQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script></body>
Live
xxxxxxxxxx18
div{ height:35px; width:35px; margin:1.3rem; border-radius:.4rem;}.box1{ background-color:orange;}.box2{ background-color:blue;}.box3{ background-color:green;}.box4{ background-color:purple;}
Live
xxxxxxxxxx12
// Create a timelineconst tl = gsap.timeline();// Add animations to the timelinetl.to(".box1", { duration: 1, x: 200 }) // animation 1 tl.to(".box2", { duration: 2,x:200 }) // animation 2 tl.to(".box3", { duration: 1.5, x:200}) // animation 3 tl.to(".box4", { duration: 1, x:200 }); // animation 4// Play the timelinetl.play();
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.