Some nice animation for you

[Benjamin Richter]

Hey folks,

just wanted to share a small css snippet with you:

@keyframes begindrag {
    0% {
        transform: rotate(0deg) translateX(-50%) translateY(-75%);
    }
    10% {
        transform: rotate(-3deg) translateX(-50%) translateY(-75%);
    }
    30% {
        transform: rotate(3deg) translateX(-50%) translateY(-75%);
    }
    55% {
        transform: rotate(-1deg) translateX(-50%) translateY(-75%);
    }
    80% {
        transform: rotate(1deg) translateX(-50%) translateY(-75%);
    }
    100% {
        transform: rotate(-1deg) translateX(-50%) translateY(-75%);
    }
}

.e-cloned-card {
    animation-name: begindrag !important;
    animation-duration: .8s !important;
    animation-timing-function: ease !important;
    animation-fill-mode: forwards !important;
    box-shadow: #0006 0 0 4px 0 !important;
}

Results in:

1. Dragged kanban card now "centered" (well, mostly)
2. Nice animation (you're welcome to improve)

Have a nice day

[Vinitha Jeyakumar]

Hi Benjamin,

Thanks for sharing your suggestion. we will consider this as an improvement from our end.

Regards,

Vinitha

[Phil Seeman]

Thanks, Benjamin Richter - very nice!

[Gokulraj Devarajan]

Hi Benjamin Richter,

We have created a documentation task to include the animations in the "How-To" section of the Kanban Documentation. Please find the attached feedback link below.

https://www.syncfusion.com/feedback/44965/to-add-custom-card-animations-for-dragged-kanban-card

Regards,

Gokulraj Devarajan