Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
billy nugz

morphSvg with canvas and timelineMax

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

Hello,

 

I'm trying to mimic the morphing effects found on this sight https://en.creddy.ru I started modifying some of the examples I found poking around the forums (code pen attached) but I cant seem to get the Timeline animations to be as smooth.  

 

The rough approach I want to take for this would be as follows:
1 Loop through all "image containers" find find svg 
2 Loop through svg to find paths with class "morph"
3 Use the morph paths to create animation 

Step 1 and 2 I can solve for but I don't know enough about the MorphSVG plugin to make the effect smooth and via canvas.  I assumed using TLM would be the best bet but if anyone has any pointers or suggestions on how to approach this better please let me know.

 

My thanks in advance.

See the Pen VGXKjQ?editors=0010 by anon (@anon) on CodePen

Link to comment
Share on other sites

Not sure what your question is exactly.

 

One of the reasons your animations are jittery can be because your paths are too complex and/or long. You can simplify your paths using https://jakearchibald.github.io/svgomg/

 

Another reason would be, you are running too many animations at once and asking browser to do too much work. Take a look at following article it has few performance optimization tips for canvas. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas

 

As for your question about how to setup your animations, the demo you posted has a example using TimelineMax so I am not sure which part is confusing you.

 

For parallax effect you can't use TimelineMax, here are simple examples of how you can do it in HTML. You can apply same logic for canvas,

 

 

  • Like 4
Link to comment
Share on other sites

Hey thanks for the response, sorry if I wasn't clear. Basically I wanted to use MorphSVG to animate 3 or more svg paths smoothly. I'm currently trying to pick apart this code pen. Its a little much for what I want to do but performance wise seems fine. I'm really just working toward a simplified version of this (code pen below) and was wondering about best practice as it relates to MorphSVG/TimelineMax. Is it better to use TimelineMax to achieve this? Worse? Why? Thanks again.
 

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

 

Link to comment
Share on other sites

If you're asking about TimelineMax vs. TweenMax, it makes virtually no difference performance-wise. Think of TimelineMax as an organizational tool and/or a way to control a group of tweens as a whole. It can greatly simplify workflow too in certain situations, like when you're trying to build a complex sequence. See https://css-tricks.com/writing-smarter-animation-code/

 

Here's a fork of your demo that cleans things up a bit and uses a little-known "stringFilter" property that basically controls how two strings are compared and then tweened. In this case, it taps into MorphSVGPlugin's special capabilities to convert the shapes into ones that have a matching number of points so that they can be interpolated cleanly. 

 

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

 

Is that what you're looking for? 

  • Like 4
Link to comment
Share on other sites

Hey, Yes thanks. A little bit to go before production but this is a great starting point thanks again for the info. Once done I will post the results. 

  • Like 2
Link to comment
Share on other sites

Wait, what? 

 

What is this "stringFilter" ???

 

What is this wizardry? ? There is a never ending bundle of surprises in the GSAP toolbox.

  • Like 1
Link to comment
Share on other sites

11 minutes ago, PointC said:

Wait, what? 

 

What is this "stringFilter" ???

 

Here's the challenge: when GSAP is asked to interpolate between two strings, it can walk through that string and pick out all the numeric values and match them up for interpolation, BUT what about more advanced cases where there are special ways those values need to be interpreted?

 

For example, some strings may have colors like "red" or "#F00" or "#FF0000" or "rgb(255,0,0)" or hsl() values. Those are no longer plain strings - the colors must be converted into rgba() values in order to cleanly interpolate them. CSSPlugin adds that filter automatically. Or in this case of morphing, the 2 strings must be converted to cubic beziers and then compared and the number of points matched so that interpolation is clean. THAT is what stringFilter is for. You can define it on a per-tween basis (as I did in my demo above), or you can set TweenLite.defaultStringFilter. 

 

A filter is basically a function that accepts an array as the first parameter (sometimes filters can accept more parameters too, but they all at least accept an array). The first element of the array is the "start" value, and the 2nd element is the "end" value. The filter's job is to look at those and, if necessary, CHANGE those values in the array. So feed an array into MorphSVGPlugin.pathFilter() and they'll be changed into cubic beziers that have matching numbers of points. 

 

It's not documented because it was intended as more of an internal mechanism. But perhaps soon we should go ahead and make it more public for cases like this :)

  • Like 5
Link to comment
Share on other sites

Ok guys, is there anyway to animate only certain paths on a svg?
Also should you animate the svg then change context of canvas or create canvas context and then animate the specific paths?
Take a look at what I'm doing on this pen, the 1,2,3 approach above is what I need to do (I think) but I'm falling flat on the animation part.  My thanks in advance.

See the Pen wEjxxp?editors=0110 by billyNugz (@billyNugz) on CodePen

 


 

Link to comment
Share on other sites

I don't have time to dig through that whole codepen right now, but I'd strongly recommend starting simple and then expanding. Just get one path animating, then add the next piece of the puzzle. It looks like you're trying to do a bunch of steps all at once and failing (multiple levels of wrapping, base-64 encoding and injecting SVG into an <img> then drawing that to canvas, dynamically creating nodes, morphing many paths, etc., etc.) so it's tough to know exactly which step is failing without pulling it all apart again and going step-by-step. 

 

You'd greatly increase your chances of getting help here if you provide reduced test cases that isolate a particular issue. Perhaps someone else has time to dissect all the code and figure out what you're attempting and then what's broken. 

 

Oh, and I think you meant d: svgPath[0] instead of d: svgPath inside your runTweenSVG() function.

  • Like 1
Link to comment
Share on other sites

Is there any reason you're trying to use canvas for this? I think it would be much easier to do everything with SVG if you're just starting out. 

  • Like 1
Link to comment
Share on other sites

Hey guys, agreed, trying to jam to much jelly on the bread at once I have stepped away from it for the evening. The morphsvg stuff and canvas animation is new to me. From the little I know about svg and canvas I read there were a few performance/browser compatibility pluses to rendering to canvas. Thats why I chose this route.  I'm guessing I should get the svg animating the way I like it then render that animated svg to the canvas. Currently I'm doing the reverse with some strange results. I will strip it down and take another stab at it and report back. Thanks again guys.

  • Like 1
Link to comment
Share on other sites

6 hours ago, billy nugz said:

From the little I know about svg and canvas I read there were a few performance/browser compatibility pluses to rendering to canvas. 

 

GSAP irons out lot browser inconsistencies with SVG, so compatibility really isn't an issue. And it's true that canvas may perform better than SVG, but that also comes at cost. Mainly, you have to manually do everything the browser would automatically do for you, and the learning curve can be steep.

 

With SVG, this is pretty much all you need to morph.

 

tl.to(path, 1, { morphSVG:"#morph-step-1" })
  .to(path, 1, { morphSVG:"#morph-step-2" })
  .to(path, 1, { morphSVG:"#morph-step-3" });

 

 

With canvas, this is the code for 1 animation.

 

See the Pen VGdwmw by osublake (@osublake) on CodePen

 

  • Like 4
Link to comment
Share on other sites

First off thank you for taking the time to write that. I really do appreciate it and would not be this far along with out the help. I poked around with things off and on today and think I came up with a solution for running this with multiple svgs/canvases/contexts. Take a peek and let me know what you think, its a little loopy (pun intended) but should work.
 

See the Pen jvKMdg?editors=0110 by billyNugz (@billyNugz) on CodePen

Thanks again guys, *Bill sends virtual chest bump*

  • Like 3
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.
×