Deka87 Posted August 10, 2021 Share Posted August 10, 2021 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 Link to comment Share on other sites More sharing options...
Deka87 Posted August 10, 2021 Author Share Posted August 10, 2021 Looks like using fromTo is the way to go about it. I wonder what's the underlying issue here though? Link to comment Share on other sites More sharing options...
Cassie Posted August 10, 2021 Share Posted August 10, 2021 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? 1 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted August 11, 2021 Solution Share Posted August 11, 2021 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? 2 1 Link to comment Share on other sites More sharing options...
Deka87 Posted August 11, 2021 Author Share Posted August 11, 2021 Thank your very much! Everything makes sense now and the problem is solved without `fromTo`. 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 11, 2021 Share Posted August 11, 2021 Jack to the rescue! 🥳 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now