<main>
<div class="square"></div>
<svg width="100" height="100">
<rect
class="shape"
width="100"
height="100"
style="
fill: hsl(0, 0%, 0%);
stroke-width: 5;
stroke: rgb(0, 0, 0)
"
/>
</svg>
<svg width="100" height="100">
<rect
class="shape"
width="100"
height="100"
style="
fill: hsl(0, 100%, 40%);
stroke-width: 5;
stroke: rgb(0, 0, 0);
"
/>
</svg>
<svg width="100" height="100">
<rect
class="shape"
width="100"
height="100"
style="
fill: hsl(60, 100%, 40%);
stroke-width: 5;
stroke: rgb(0, 0, 0);
"
/>
</svg>
</main>
main {
display: flex;
flex-direction: column;
}
.square {
width: 100px;
height: 100px;
background: blue;
border: 3px solid black;
}
main > svg {
margin-top: 1rem;
}gsap.to("svg:last-child", {
duration: 1,
x: 100,
ease: "elastic",
repeat: 1,
yoyo: true,
yoyoEase: "power1.out"
});
/*
Repeat combined with yoyo means the repetition will be the opposite of the original. We can also specify a diffent ease type.
*/
gsap.from(".square", {
backgroundColor: "green",
delay: 2,
});
gsap.fromTo(
".square",
{x: 50},
{x: 0, duration: 1}
);
External CSS
This Pen doesn't use any external CSS resources.