Shape Morphing with ScrollTrigger and paper.js

[brands & beyond GmbH]

Hello again guys ✌️

 

I´m right into the ‘basic‘ ScrollTrigger thing for quite a while now. Since I´ve upgraded myself with ShockinglyGreen, so things getting even greater with the MorphSVGPlugin, which progress of transformation can be controlled with ScrollTrigger. The Results are impressive.

 

After playing around with this while interacting with svg elements directly in the DOM, I slightly get disturbed by the fps drops this can cause with other animations or if you get your page in bigger screen dimensions or resolutions (4K / Retina).

 

I stumbled upon a great library called paper.js which can bring path information into canvas, which (in theory) should appear as  the more performant approach, especially if you scale things up. Also the feature to group and edit things in paperscipt could be a good partner by creating for example a sweet set of dynamic fullscreen transitions without touching the DOM.

 

The example below shows that it´s contents created with paper.js / paperscript can be changed by gsap and ScrollTrigger in a simple manner: demo

It would be great to have a smart way to archive the MorphSVGPlugin behaviour inside this canvas stage which is controlled by ScrollTriggers progress. Maybe there is another general solution or it isn´t even really faster from an performance perspective than I expected.

 

I´ll fork a simple demo to see morphSVG in action

 

Seen on:

 

Would love to read some thoughts from you about that

 

Best Wishes,

Richard

 

 

 

 

See the Pen zYqBore by rkxn (@rkxn) on CodePen

[ZachSaucier]

Hey Richard, welcome. Thanks for supporting GreenSock by being a Club GreenSock member!

 

Are you aware of the .defaultRender property of MorphSVG? With it you can render to canvas  You might not even need paper.js.

[brands & beyond GmbH]

42 minutes ago, ZachSaucier said:

Hey Richard, welcome. Thanks for supporting GreenSock by being a Club GreenSock member!

 

Are you aware of the .defaultRender property of MorphSVG? With it you can render to canvas  You might not even need paper.js.

 

Okay, I stumbled upon this, but totally overlooked that... especially the pen in that reference, which is well explaining the solution

 

Thanks Zach!