<div class="h-screen flex items-center justify-center relative">
<div class="border-t-[5px] border-red-800 w-full h-[5px] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
<div class="border-l-[5px] w-[5px] h-screen border-red-800 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
<div id="box" class="box w-[50px] h-[50px] bg-blue-600 rounded-lg absolutes z-[3]"></div>
</div>const tl = gsap.timeline({
yoyo: -1,
repeat: -1,
repeatDelay: 1,
});
tl.to(".box", {
x: -100,
y: -100,
duration: 3,
})
.to('.box', {
x: 0,
y: 0,
duration: 3,
})
.to(".box", {
x: -100,
y: 100,
duration: 3,
})
.to('.box', {
x: 0,
y: 0,
duration: 3,
})
.to(".box", {
x: 100,
y: 100,
duration: 3,
})
.to('.box', {
x: 0,
y: 0,
duration: 3,
})
.to(".box", {
x: 100,
y: -100,
duration: 3,
});
External CSS
This Pen doesn't use any external CSS resources.