Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
brands & beyond GmbH

Shape Morphing with ScrollTrigger and paper.js

Recommended Posts

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

Link to post
Share on other sites

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.

  • Like 3
Link to post
Share on other sites
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! :)

Link to post
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.

×