Integrating GSAP with paper.js

[sanbeaman 3 Likes (Newbie)]

Used the greensock AS3 library forever and love GSAP!

I'm working on a side project that involves dragdrop and drawing on canvas.

So I have been trying many different JS libraries and I haven't been able to find a single animation platform that does both draw and animate.

I really like the GSAP JS draggable functions and have been investigating paper.js.

Has anyone had luck with multiple layered canvases and leveraging both paper.js and GSAP.

 

thanks

drew

[GreenSock 8,117 Likes (Superhero)]

I've never tried them together, no. Please do let us know how it goes. Hopefully someone else here will have some experience to share or tips for you. 

[pier 4 Likes (Newbie)]

I've used GSAP with Pixi in the past. No problems and the idea is the same than with Paper.js.

 

GSAP can tween values in any JS object so you can either tween an intermediary object and then read those value with onFrame() in Paper.js, or directly tween the values of Paper.js objects.

[Striffly 0 Likes (Newbie)]

I made a little example combining the two libraries.

Hope this will help anyone who want to use them

 

See the Pen XgNZZJ by Striffly (@Striffly) on CodePen

 

[marzi 5 Likes (Newbie)]

Hello,

 

I am trying  to tween the "size" of a paper.js rectangle:

 

var rectangle = new Path.Rectangle({
	strokeColor: 'rgba(255,0,0,0.5)',
	strokeWidth: 3,
	point: [46.1, 250.5],
	size: [223.2, 137.9]
});

 

Have you any idee how to do that? I have tried to do it with array (technic below) but it seams im the beginer im supposed to be in javascript

 

See the Pen xcwEK by jamiejefferson (@jamiejefferson) on CodePen

 

Could you help me?

 

Here is my code:

var arr1 = [223.2, 137.9];
var arr2 = [400, 200]; 

var rectangle = new Path.Rectangle({
	strokeColor: 'rgba(255,0,0,0.5)',
	strokeWidth: 3,
	point: [46.1, 250.5],
	size: arr1
});

arr2.ease = Back.easeInOut;

TweenMax.to(arr1, 10, arr2);

 

 

 

 

[Carl 9,066 Likes (Superhero)]

Hi marzi,

 

Not sure who around here uses Paper.js. It would be most helpful though if you created a simple CodePen demo that creates the rectangle you need to animate. If we can see working code for a simple Rectangle it will at the very least give us a starting point for figuring out how to manipulate that rectangle. Thanks

 

 

[marzi 5 Likes (Newbie)]

Hi Carl,

 

Please find below my rectangle

 

See the Pen KveXoL by mpiguet (@mpiguet) on CodePen

 

[Carl 9,066 Likes (Superhero)]

Thanks for the demo. Very helpful. 

Before animating the width, height or size, it is important to see how one would change the width or height of that rectangle after it is created.

I did some poking around the Paper.js docs. It appears you are creating a Path object based off properties of a Rectangle. The problem appears to be that the Path does not have a width, height or size object to directly modify.

 

Paper docs for Path: http://paperjs.org/reference/path/#

 

There are properties like: scaling, rotation, opacity that can be set and animated

 

See the Pen jLKYOm?editors=1010 by GreenSock (@GreenSock) on CodePen

 

I don't see anything there about size, width, or height.

 

The size you are using in your Path constructor just seems to be the way you are describing the rectangular path that needs to be drawn, it isn't a size property of the Path that can be modified after the Path is created.

 

Again, I really don't know Paper.js so I could be totally wrong. Perhaps someone with more Paper.js experience has an idea.

 

 

 

 

 

[OSUblake 9,990 Likes (Superhero)]

I use Paper.js all the time, and highly recommend it for doing vector graphics. It's pretty much just like a JavaScript version of Adobe Illustrator. 

 

Most objects you pass into the constructor are copied, so you can't tween them. And you were creating a Path object, so it's creating Beziers. You probably want to create a Shape if you want to animate width and height. And just like in Illustrator, 0,0 of an object will be its center, which is where everything will transform from by default.

 

See the Pen EvRzGy?editors=0010 by osublake (@osublake) on CodePen

 

Are you actually trying to tween the width and height of a rectangle with a stroke? If so, you may need to translate your shape half a pixel if the stroke width is odd. The same thing happens with regular canvas, as explained here.

 

 

[marzi 5 Likes (Newbie)]

@Carl Thank you very much for your time, I understand better now. I will check the Paper.js doc. By the way you save me some days of headache and frustration

 

@OSUblake Thank you! You are right, Shape fit better what i was looking for. I like the way you declare "rectangle.size"/"rectangle.fillColor". And thank you for the anti-aliasing tips!

If I summarize:

• Path size set the "drawing" zone. Then the path is set in this zone. The only way to change the shape of a path is to scale it or to redefine its point.
• Shape size can be directly changed with GSAP

 

Long life to Greensock! The best animating library with the most implicated community 

 

Here is my demo with all propriteties animed. I am interested in how to translate(x,y) Shape and how to set/change the rotation point. I will investigate.

 

See the Pen KveXoL by marzi_ (@marzi_) on CodePen

 

[OSUblake 9,990 Likes (Superhero)]

A lot of the stuff you can tween can be found on the style object for your rectangle.

 

For x and y, you can tween the position object.

TweenMax.to(rectangle.position, 1, { x: "+=200", y: "+=400" });

 

To change the transform origin, you set the pivot property. It's in local coordinates, so you can do this to rotate it around the top left corner.

rectangle.pivot = rectangle.parentToLocal(rectangle.bounds.topLeft)

 

[marzi 5 Likes (Newbie)]

Whoua! You're literaly a Superhero

 

Thank you so much @OSUblake.

 

Find below the complete demo:

 

See the Pen KveXoL by marzi_ (@marzi_) on CodePen

 

[OSUblake 9,990 Likes (Superhero)]

Thanks! 

 

And you're just barely scratching the surface of what Paper.js can do. There's  a lot of good demos on CodePen, like this one I just found that uses GSAP.  Although it's probably not a good one to learn from as it's over 1,000 lines of code.

 

See the Pen GJeVgZ?editors=0010 by nmbrone (@nmbrone) on CodePen

 

[PointC 8,599 Likes (Superhero)]

10 hours ago, OSUblake said:

It's pretty much just like a JavaScript version of Adobe Illustrator. 

 

Does that come complete with Adobe bugs? 

 

I've seen you mention paper.js a few times and now, after seeing more demos, I just have to try it. Dang it Blake, I only have so many hours in the day.

 

Great info as always. BTW - welcome back from vacation. I was just about to send out a search party to look for you.

[OSUblake 9,990 Likes (Superhero)]

10 hours ago, PointC said:

Does that come complete with Adobe bugs? 

 

Hehe! Kind of the opposite. Paper started out as a plugin for Illustrator called Scriptographer, and every time Adobe released a new version of Illustrator, it broke the plugin. The developers got tired of having to rewrite their code, so they created Paper.js as a stand-alone version of Scriptographer. You can read about how it came into existence in this blog post.

 

10 hours ago, PointC said:

I've seen you mention paper.js a few times and now, after seeing more demos, I just have to try it. Dang it Blake, I only have so many hours in the day.

 

You're not alone. I know @Dipscom has mentioned several times that he would like to learn Paper.js, but not enough time.

 

Learning Paper.js

One problem with learning Paper.js is that a lot of the examples you'll find are written in PaperScript, which is an extension of JavaScript. You don't have to use PaperScript, but it can create problems early on when you're trying to learn the API using regular JavaScript.

 

For example, you'll see a lot of operator overloading in PaperScript examples, but that won't work with JavaScript, so you have to change the code a little.

// PaperScript
var point1 = new Point(100, 200);
var point2 = point1 / 2;

// JavaScript
var point1 = new Point(100, 200);
var point2 = point1.divide(2);

 

You can view and edit the PaperScript code for the examples by clicking on the "Source" button in the top-right corner of the screen. To understand how to convert a PaperScript example to regular JavaScript, I made a demo of the Smoothing example. The main difference between the two is how I calculated the initial mouse position, and the event listeners I added to the view.

 

See the Pen b4aa11372e53125a79b1eaf4b0068fa0?editors=0010 by osublake (@osublake) on CodePen

 

[marzi 5 Likes (Newbie)]

@OSUblake I think I haven't well understood the anti-aliasing tip, my paper.js composition seems to be blurred when the window's size change. 

Auto-resize problem?

 

See the Pen oeQjgj by marzi_ (@marzi_) on CodePen

 

 

[OSUblake 9,990 Likes (Superhero)]

Hi @marzi

 

I probably confused with that translating 1/2 pixel thing. If you're using paper.js, you should not access the context directly like that as paper.js is going to change it.

 

And the reason for translating 1/2 pixel is when the stroke is an odd number e.g. 1, 3, 5. The reason is because the stroke is centered, so it needs to land on a full pixel value. 

 

That's kind of the reason you're seeing a blur, but in your case, there's not an easy fix. You're using fractional values for the size and position of your rectangles. On top of that, you're scaling the group by 0.5, which is results in more fractional values. When something is not a whole value, it's going to result in a little blur as the browser has to do some sub-pixeling. During an animation, that won't be noticeable. Only when the object isn't moving.

 

See the Pen a08a9b76a8b5fcd23681788aae33eafc?editors=0010 by osublake (@osublake) on CodePen

 

 

Here's an unfinished demo I was making for somebody. You might be able to get some ideas from it. When you press enter twice, it will create a new rectangle and will zoom out.

 

See the Pen aed792b678884787f0497cffc41d8518?editors=0010 by osublake (@osublake) on CodePen

 

[marzi 5 Likes (Newbie)]

@OSUblake Thank you! I understand better now. I will try to clean it !