GSAP + PaperJS position animation

[Deka87]

Hi there, 

 

First of all, thanks for the amazing product! I am trying to integrate it into an existing Paper.js application to replace the original .tweenTo function (http://paperjs.org/reference/tween/). The only issue I am facing so far is the "chaining" of the position or point property animations:

 

paper.install(window)  
paper.setup(canvas);

const text = new PointText({
    point: new Point(100, 100),
    fontFamily: "sans-serif",
    fontWeight: "bold",
    fontSize: 48,
    fillColor: 'black'
});
text.content = 'Move me';



const timeline = gsap.timeline();

timeline.to(text.point, { duration: 1, x: '+=100' });
timeline.to(text.point, { delay: 1, duration: 1, x: '+=100' });

For the reason unknown to me, it moves the text back to its original position before doing the second animation (i.e. instead of going from 100 -> 200 -> 300, it goes 100 -> 200 -> 100 -> 200). Chaining other properties animation e.g. width, height, color, opacity works as expected. I tried to play with replacing point with position, combining them together, but nothing worked for me. Any help would be greatly appreciated!

See the Pen GRmPBZB?editors=0010 by yevsim (@yevsim) on CodePen

[Deka87]

Looks like using fromTo is the way to go about it. I wonder what's the underlying issue here though?

 

 

[Cassie]

Yep, I'd recommend using fromTo aswell - 

But it is odd behaviour. .. It shouldn't need a fromTo

See the Pen ebd5e3ff514339ee3b6522ea25451ca3?editors=1111 by cassie-codes (@cassie-codes) on CodePen

Maybe this thread will help?

 

[GreenSock]

12 hours ago, Cassie said:

But it is odd behaviour. .. It shouldn't need a fromTo

 

It's because apparently PaperJS returns a DIFFERENT point object every time you reference text.point:

let point = text.point;
console.log(point === text.point); // FALSE!!!

🙄

 

So you weren't animating the same object each time. 

 

Solution: make sure you're animating the same object, like this: 

See the Pen fb0fdf359e52300c197fb1675e5a7e03?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that clear things up? 

[Deka87]

Thank your very much! Everything makes sense now and the problem is solved without `fromTo`.

[Cassie]

Jack to the rescue! 🥳