Is there an easy way to create complex animations without blindly tweaking keyframes? I'm searching for a tool or editor that can generate the necessary animation code, similar to this example: https://codepen.io/kilianso/pen/NaLzVW
/* STATE 2 */
.scroll__view[data-current="2"] {
.rectangle-1 {
background: #b3cc35;
left: 34.398%;
top: 60.665%;
transform: translate(-50%, -50%) rotate(27deg);
}
.rectangle-2 {
background: #a4c339;
left: 44.698%;
top: 60.665%;
transform: translate(-50%, -50%) rotate(27deg);
}
.rectangle-3 {
background: #92b93d;
left: 54.898%;
top: 60.665%;
transform: translate(-50%, -50%) rotate(27deg);
}
.rectangle-4 {
background: #80b040;
left: 65.298%;
top: 60.665%;
transform: translate(-50%, -50%) rotate(27deg);
}
.rectangle-5 {
background: #b3cc35;
left: 34.398%;
top: 60.665%;
transform: translate(-50%, -50%) rotate(27deg);
opacity: 0;
}
I wonder if there's a visual UI editor used by animators to easily create such animations. Any suggestions?