GreenSock GSAP: несколько удобных для разных атрибутов?

Question

У меня есть элемент оживляющий из верхнего левого угла к центру экрана:

TweenMax.to($("#char"), 1, {top: "50%", left:"50%", ease:Power1.easeOut}); 

Это оживляет по прямой, с некоторым ослаблением. То, что я хочу, это более округлой анимации, который следует по этому пути:

поэтому я должен использовать несколько TweenMax.to() вызывает, с различным ослаблением на каждой из них:

TweenMax.to($("#char"), 1, {top: "50%", ease:Circ.easeIn}); 
TweenMax.to($("#char"), 1, {left:"50%", ease:Circ.easeOut}); 

ли есть способ назначить различную легкость для каждого атрибута в одном вызове TweenMax.to()? Что-то вроде этого, может быть?

TweenMax.to($("#char"), 1, [{top: "50%", ease:Circ.easeIn}, {left:"50%", ease:Circ.easeOut}]); 

Я смотрел на всем протяжении их документы, и кажется, что я могу только передать одну легкость, которая будет применяться ко всем атрибутам.

Answer 1

Я не думаю, что многократное облегчение - это то, что вы должны искать, если хотите достичь извилистости.

Существует BezierPlugin, который, ИМХО, должен помочь вам создать изогнутый путь. Взгляните на слишком упрощенный jsFiddle, который я создал. Код которого следующим образом:

var div=document.querySelector('div'); 
TweenMax.fromTo(div, 2, {position: 'absolute', top: '0%', left: '0%'}, {bezier: {type: 'soft', values: [{top: '0%', left: '50%'}, {top: '50%', left: '50%'}], autoRotate: true}, ease: Power2.easeInOut});