Scrolltrigger SVG path + Canvas

[heim_designs]

Hello. I am new to js and GSAP. I am trying to make SVG paths morph on scroll one path to another. I tried to make it outside Canvas but perfomance was very bad on safari and mozila. So I decided to render it on canvas. But I am strugling to make it work. Right now it flickers when I scroll instead of smooth morphing. Seems like there is a problem with on update function but I cannot figure out. Can you help please?
Thanks

See the Pen vYedWEd by dmytro-karaulov (@dmytro-karaulov) on CodePen

[GreenSock]

Welcome to the forums, @heim_designs. 

 

I didn't read through all your path data, but my guess is that you had mis-matched quantities of values inside that string or the letters didn't match (start -> end). If you want to morph like that intelligently, you'll need to use MorphSVGPlugin (a members-only plugin) because it does all the hard work of calculating and subdividing to make the shapes smoothly morph even when there are mist-matched quantities of points. Otherwise, if you just try to use GSAP's built-in complex string tweening, that'll only find the number slots within the strings and match them from start to end, and animate those. 

 

Here's a fork that shoves the path data into actual SVG paths (not for display - just for parsing with the plugin): 

See the Pen MWEQQyz?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I don't really understand how you want the ScrollTriggering to work, but that should be easy for you to tweak. Your code seemed to be waiting for the element below the canvas to hit the top of the screen before doing anything which of course wouldn't make much sense because the morphing stuff would be off-screen at that point. 

 

And here's another fork that leverages MorphSVGPlugin's built-in RawPath data structure which is more compatible than your technique of doing context.fill(new Path2D(...)) and my guess is it may be faster too because the parsing of the raw numbers is already done: 

See the Pen oNGEEzb?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Here's the section in the docs that explains it: https://greensock.com/docs/v3/Plugins/MorphSVGPlugin#h3-demo-morphsvg-canvas-rendering

 

I also pinned the canvas while scrolling for 500px - I thought maybe that's the effect you were going after here?

 

Happy tweening!

[heim_designs]

Hello @GreenSock
Thank you so much for your solution. This is exactly what I needed! You saved me.
Is there any chance to change color of the fill with scroll trigger as well on canvas?

[akapowl]

Hello @heim_designs

 

The linked demo in the section of the docs that @GreenSock linked above does show how to also change the fill - you could do it just like in the demo.

 

See the Pen rNGJrry by akapowl (@akapowl) on CodePen

[heim_designs]

Thank you @akapowl
Works like a clock.