MotionPath and MorphSVG

[tobe21]

Hi,

 

I'm traying to make time line, but I want this lines to move up and down like a wave, I'm using motion path to make a circle follow it and SVGmorph to make the lines have a wave effect, but the problem is the circle continue following the old path, instead of follow the actual path with the morph applied.

 

I did a small code pen to show what I'm working on.

 

Thanks - Beto

See the Pen poZzbXm by betovicio (@betovicio) on CodePen

[Rodrigo]

Hi @tobe21 and welcome to the GreenSock forums!

 

I don't know how simple it would be to do that, since you need to tie the updated morphed path on the motion path tween on every update of the morphing tween. I don't have time to build it using your codepen but hopefully this example illustrates the pattern:

See the Pen wvxzYKM by GreenSock (@GreenSock) on CodePen

 

Now I don't see any performance issues with just that example running on an endless loop so my best guess is that you shouldn't have that in your setup, but is always a good idea to test, test and test . I'll ping @GreenSock so he can be the judge on whether this is the best approach or not.

 

Hopefully this helps. Let us know if you have more questions.

 

Happy Tweening!

[GreenSock]

This is a complicated procedure no matter how you do it because you have to re-calculate so many things on each tick. But sure, it should be possible. @Rodrigo's technique is fine, but here's a fork that should perform a bit better because it doesn't have to create an entirely new tween on every tick:

 

See the Pen vYaXVRE?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Obviously it's more complicated with all the matrix stuff, RawPath operations, etc. but all that has to happen internally with Rodrigo's strategy anyway. I'm just pulling it out and making it more exposed, while skipping the non-essential overhead. 

 

Does that help? 

[tobe21]

19 hours ago, GreenSock said:

This is a complicated procedure no matter how you do it because you have to re-calculate so many things on each tick. But sure, it should be possible. @Rodrigo's technique is fine, but here's a fork that should perform a bit better because it doesn't have to create an entirely new tween on every tick:

 

 

 

 

Obviously it's more complicated with all the matrix stuff, RawPath operations, etc. but all that has to happen internally with Rodrigo's strategy anyway. I'm just pulling it out and making it more exposed, while skipping the non-essential overhead. 

 

Does that help? 

Thanks so much, yes this help me a lot, because now I can follow this example.

 

One final question:

 

is possible to use scrub in this example? because all the animation will be attached to the scroll.

[Rodrigo]

17 minutes ago, tobe21 said:

is possible to use scrub in this example? because all the animation will be attached to the scroll.

Sure thing, just add the ScrollTrigger plugin and the configuration object and remember to remove the repeat, delays and yoyo (at least in the examples Jack and I created) and it should work:

See the Pen PoBbzqp by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!