Jump to content
Search Community

Integrating GSAP with paper.js

sanbeaman test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

  • 1 year later...

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.

Link to comment
Share on other sites

  • 11 months later...
  • 2 months later...

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);

 

 

 

 

Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

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.

 

 

 

 

 

  • Like 2
Link to comment
Share on other sites

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.

 

 

  • Like 4
Link to comment
Share on other sites

@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

 

  • Like 2
Link to comment
Share on other sites

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)

 

  • Like 5
Link to comment
Share on other sites

10 hours ago, OSUblake said:

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

 

Does that come complete with Adobe bugs? :lol:

 

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.

  • Like 3
Link to comment
Share on other sites

10 hours ago, PointC said:

Does that come complete with Adobe bugs? :lol:

 

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.

 

 

  • Like 4
Link to comment
Share on other sites

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.

 

 

 

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.

 

 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...