fly.js

fly.js

import $ from 'jquery';

export default (src, dst) => {
    let divider = 3,
        $src = $(src),
        $dst = $(dst),
        $srcClone = $($src.clone());

    $srcClone.css({
        'position': 'absolute',
        'top': $src.offset().top + "px",
        'left': $src.offset().left + "px",
        'opacity': 1,
        'z-index': 1000
    });

    $('body').append($srcClone);

    let gotoX = $dst.offset().left + ($dst.width() / 2) - ($dst.width() / divider) / 2,
        gotoY = $dst.offset().top + ($dst.height() / 2) - ($dst.height() / divider) / 2,
        options = {
            opacity: 0.4,
            left: gotoX,
            top: gotoY,
            width: $src.width() / divider,
            height: $src.height() / divider
        };

    $srcClone.animate(options, 'normal', () => {
        $srcClone.fadeOut('fast', () => {
            $srcClone.remove();
        });
    });
}