BGA - animate element movement between divs

animate_element_between_divs.js

animateFrom: function(elem, oldPos, duration = 500) {
    if (this.instantaneousMode || !elem.animate) {
        return;
    }
    const newPos = elem.getBoundingClientRect();
    const translateX = oldPos.x - newPos.x;
    const translateY = oldPos.y - newPos.y;
    if (translateX == 0 && translateY == 0)
        return;
    elem.animate([
        {transform: `translate(${translateX}px, ${translateY}px)`},
        {transform: 'none'}
                                                                    
    ], {duration: duration}).play();
},
                                                                    
prepareDivSlide: function(elem) {
    if (this.instantaneousMode || !elem.animate) {
        return;
    }
    let wm = new WeakMap();
    for (const item of elem.children) {
        wm.set(item, item.getBoundingClientRect());
    }
    return {elem: elem, items: wm};
},
                                                                    
animateDivSlide: function(o) {
    for (const item of o.elem.children) {
        let rect = o.items.get(item);
        if (!rect) continue;
        this.animateFrom(item, rect);
    }
},


// Moving the element:
let oldPos = elemToMove.getBoundingClientRect();
let sourceDivAnim = this.prepareDivSlide(sourceDiv);
let targetDivAnim = this.prepareDivSlide(targetDiv);
                                                       
elemToMove.remove()
targetDiv.appendChild(elemToMove);
                                                       
this.animateFrom(elemToMove, oldPos);
this.animateDivSlide(sourceDivAnim);
this.animateDivSlide(targetDivAnim);