Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
elegantseagulls

MotionPath and MorphSVG

Recommended Posts

Hey fellow GSAPers, I've got this, working, but am wondering if my approach is best, as it seems to lag pretty hard in FireFox osX (It seems to run much better in Chrome).

 

Anyhow, my approach is: I'm running a morphSVG and using onUpdate to .set the MotionPath to the Morphed path (see line 57-77 in my CodePen).

 

I would think the animation I'm using should be able to make use of hardware acceleration, but perhaps this animation is best left to canvas/WebGL?

 

As always, thanks for any insight or suggestions. 

 

https://codepen.io/elegantseagulls/pen/wvazXLe?editors=0111

Share this post


Link to post
Share on other sites

Interesting pen!

 

It's pretty laggy for me in Chrome on Catalina. 

 

What you're currently doing is creating a new motion path each update which is pretty intensive. Using the perf tab in dev tools, you can see that most of the delay is caused by the calculations, not rendering, so switching to canvas/webgl wouldn't help too much in terms of that. It'd still render a little faster but my guess is you'd still have stuttering.

 

An alternative approach would be to create a set of motion paths on page load, saving those to memory. Then inside of the onUpdate you just find the closest saved state of the motion path and use that as the reference to place your elements. I think that'd fix the core of the issue but I haven't tested the approach. 

 

Side note: you have the following declared twice - not sure if you meant to do that.

gsap.set([eText.chars, sText.chars],{clearProps:'all', scale: 0})
gsap.set([eText.chars, sText.chars],{scale: 0.4})

 

  • Like 1

Share this post


Link to post
Share on other sites
1 hour ago, ZachSaucier said:

An alternative approach would be to create a set of motion paths on page load, saving those to memory.


Interesting idea! How would you go about creating these on load?

My guess would be to just run the morph and push the path it creates onUpdate to an array (but that seems like it's still a lot), then set the motionPaths based on that. Also, what would motion path get stored as? Would that just be an array of coordinates?

 

Then, would you approach this like a sprite then, or could/would you tween each shape from one motion path to the next, using the gsap.utils.wrap util?

 

Or perhaps I should create a motionPath for each letter moving left-to-right based on a start, middle, and end coords so that way I don't have to use an onUpdate.
 

Perhaps I'm better off trying to tie anchor letter to a rope/mesh in webGL and tweening that curve on that...

 

Looks like I've got some exploring to do...

Share this post


Link to post
Share on other sites
1 hour ago, elegantseagulls said:

How would you go about creating these on load?

I haven't tested this idea, but you could run the morph and in the onUpdate push the path data to an array in string form (you don't have to render it to the screen). Then I guess you could even create all the keyframes for every letter before you run the animation and run it similar to a sprite animation, yeah. 

 

1 hour ago, elegantseagulls said:

perhaps I should create a motionPath for each letter moving left-to-right based on a start, middle, and end coords so that way I don't have to use an onUpdate.

I like that idea. You could even use the same path but make a bunch of copies and scale them, then use align: "self" for each letter's path.

 

I'm interested to see what you come up with :) 

  • Like 1

Share this post


Link to post
Share on other sites
1 hour ago, ZachSaucier said:

I'm interested to see what you come up with :) 

It started as a fun experiment, now it's eating at me to optimize! I'll keep you posted.

Share this post


Link to post
Share on other sites

Fun little animation! The distribute util is the coolest thing ever, right @Carl ?

 

18 hours ago, ZachSaucier said:

An alternative approach would be to create a set of motion paths on page load, saving those to memory. Then inside of the onUpdate you just find the closest saved state of the motion path and use that as the reference to place your elements.

 

Caching is a very good technique to improve performance, but I think an easier solution is to just record the ending transformations from the wiggle animation, and then create a timeline from those values. 

 

See the Pen 6e1e0338d8708ea850166b8d0fafab4a by osublake (@osublake) on CodePen

 

 

  • Like 6

Share this post


Link to post
Share on other sites
On 2/22/2020 at 2:24 AM, OSUblake said:

record the ending transformations from the wiggle animation, and then create a timeline from those values. 

Thinking about it over the past few days and figured that a solution like this would be my best bet! Was just about to start working on it, and decided to check back here—of course @OSUblake was one step ahead. Thanks for making it easy on me!

  • Like 2

Share this post


Link to post
Share on other sites

Also, @OSUblake sorry you had sift through my hastily written, non-dry, very un-variabled code. Was just trying to get a proof of concept out for something. Haha!

Share this post


Link to post
Share on other sites

Ha, you're good! I did the DRY part last as I wasn't sure if there was a difference between the e and s animations.

 

And just a little FYI. Something is a little different with my version, but I didn't look in to it. When I resize or reload the pen, the position gets a little wonky.

 

image.png.79257cca1bb13e5ed54b63d06ad2f2cc.png

 

 

 

  • Like 2

Share this post


Link to post
Share on other sites
On 2/23/2020 at 5:19 PM, OSUblake said:

Something is a little different with my version, but I didn't look in to it.

 

Yeah, that's because it wasn't re-aligning to the path of the SVG every single tick. A little CSS tweak got that taken care of.

Turns out for this particular example I don't need MorphSVG either (though it would make alignment much easier if I were to expand on this example, reusing paths for starting/middle/ending points, etc).

I'm calling this a done basic proof of concept:

See the Pen wvazXLe by elegantseagulls (@elegantseagulls) on CodePen

 

Thanks again for the ideas and assistance @OSUblake and @ZachSaucier!

  • Like 3

Share this post


Link to post
Share on other sites

Reversing the text allows for you to write out something: 

See the Pen KKpambW?editors=1000 by GreenSock (@GreenSock) on CodePen

 

Could be useful if you had a different, more readable path.

 

Edit: playing around with this, especially the distribute part, is pretty fun :) 

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

  • Like 3

Share this post


Link to post
Share on other sites

@elegantseagulls 

 

Your pen is featured on CodePen, but it's using the bad version. You might want to you update the code in your pen.

 

 

image.thumb.png.2ff26c8158c8092e23c9b76a5b1733d5.png

 

 

  • Like 1

Share this post


Link to post
Share on other sites

@OSUblake Gah! I forked that one for learning/teaching's sake. Thanks for the heads up! Pen is updated!

Share this post


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.

×