GSAP для преобразования скорости

Question

Я работал над некоторыми анимациями Velocity JS и пытался научиться расслабляться на ходу. Мой JavaScript довольно прост, поэтому я наткнулся на камень преткновения. Это должно было быть обучающим упражнением, и на первый взгляд это кажется тривиальным, но я не совсем понимаю, что делать.

Дизайнер передал рабочий прототип анимации с использованием Edge animate. Я пытаюсь преобразовать это из изображений и кода GSAP в SVG и Velocity JS. Проект уже использует Velocity JS для других задач, поэтому нет смысла включать другую библиотеку только потому, что именно это Edge использует для одной анимации.

Анимация - это мерный стакан, который затухает, и затем два пузырька используют обычное ослабление, чтобы пузыриться из верхней части мензурки.

SVG для стакана находится на скрипке, а код GSAP, созданный ниже: http://jsfiddle.net/darker_heroe/9zjrq0zq/

<pre>

    "Bubbles": {
        version: "6.0.0",
        minimumCompatibleVersion: "5.0.0",
        build: "6.0.0.400",
        scaleToFit: "none",
        centerStage: "none",
        resizeInstances: false,
        content: {
            dom: [
                {
                    transform: [[], [], [], ['0.5', '0.5']],
                    borderRadius: ['50%', '50%', '50%', '50%'],
                    id: 'Bubble_01',
                    opacity: '0',
                    rect: ['-3px', '-2px', '36px', '36px', 'auto', 'auto'],
                    stroke: [2, 'rgba(234, 239, 240, 0)', 'solid'],
                    type: 'ellipse',
                    autoOrient: 'true',
                    fill: ['rgba(255,255,255,1.00)']
                },
                {
                    transform: [[], [], [], ['0.75', '0.75']],
                    borderRadius: ['50%', '50%', '50%', '50%'],
                    id: 'Bubble_02',
                    opacity: '0',
                    rect: ['3px', '-2px', '29px', '29px', 'auto', 'auto'],
                    stroke: [2, 'rgba(234, 239, 240, 0)', 'solid'],
                    type: 'ellipse',
                    autoOrient: 'true',
                    fill: ['rgba(255,255,255,1)']
                }
            ],
            style: {
                '${symbolSelector}': {
                    rect: [null, null, '40px', '40px']
                }
            }
        },
        timeline: {
            duration: 4000,
            autoPlay: true,
            data: [
                [
                    "eid2211",
                    "opacity",
                    581,
                    919,
                    "easeOutQuad",
                    "${Bubble_02}",
                    '0',
                    '0.5'
                ],
                [
                    "eid2210",
                    "opacity",
                    1500,
                    1000,
                    "easeOutQuad",
                    "${Bubble_02}",
                    '0.5',
                    '0'
                ],
                [
                    "eid2230",
                    "opacity",
                    90,
                    160,
                    "easeOutQuad",
                    "${Bubble_01}",
                    '0',
                    '0.49659030720339'
                ],
                [
                    "eid2231",
                    "opacity",
                    250,
                    750,
                    "easeOutQuad",
                    "${Bubble_01}",
                    '0.4965899884700775',
                    '0.5'
                ],
                [
                    "eid2232",
                    "opacity",
                    1000,
                    1000,
                    "easeOutQuad",
                    "${Bubble_01}",
                    '0.5',
                    '0'
                ],
                [
                    "eid2201",
                    "location",
                    0,
                    2000,
                    "easeOutQuad",
                    "${Bubble_01}",
                    [[22.23, 22.57, 0, 0, 0, 0,0],[37.23, -71.23, -75.36, -182.55, -64.78, -156.91,99.63],[39.24, -257.75, -17.9, -162.49, -20.57, -186.71,288.05],[-15.3, -365.28, 0, 0, 0, 0,410.23]]
                ],
                [
                    "eid2203",
                    "location",
                    500,
                    2000,
                    "easeOutQuad",
                    "${Bubble_02}",
                    [[23.29, 18.78, 0, 0, 0, 0,0],[58.43, -65.15, -99.73, -231.78, -45.91, -106.69,95.65],[57.39, -269.81, 85.4, -51.39, 102.76, -61.84,310.38],[66.53, -365.66, 0, 0, 0, 0,411.13]]
                ]
            ]
        }
    },

</pre>

У меня такой вопрос: возможно ли даже преобразование между двумя библиотеками? Я уже потратил на это целый день и больше не хочу тратить время на попытки сделать что-то, что не сработает.

Я не ищу инструмент для обработки этого преобразования, так как это учебное упражнение (в котором я думаю, что я укусил больше, чем я могу пережевывать), а скорее пример или объяснение того, как я собираюсь преобразовать Временная шкала GSAP или даже просто настраиваемая часть кода Velocity JS.

Действительно ценю любой вклад по этому вопросу.

Большое спасибо