Jump to content
GreenSock

foundartfactory

MotionPathPlugin, move animated element across animated path

Recommended Posts

Hi there:

Long time listener, first time caller :-)

 

I'm trying to animate an object across a moving path. I started from  @PointC's pen example for animating an element across a static path, and it works great. When I animate the target-path, my target doesn't follow the movement of the target-path (it follows the OG static path). The waves animation is from an example by Chris Gannon on CodePen.

 

I looked around and was tracking the forum post (linked below). I'll admit to having gotten lost, not having used GSAP effects yet. Is that the best practice way to approach doing this? 

 

This example animation is a small part of a bigger project, but there is potential for dozens or more of these objects to be animated.

 

Apologies if this example code is messy or has other stuff going on; it's stripped down believe me :) ...The motion path code is on or about lines 63-111 in the JS.

 

Many thanks in advance for any insight! 

 

Patrick

 

 

See the Pen XWVojWg by foundartfactory (@foundartfactory) on CodePen

Link to comment
Share on other sites

Hi @foundartfactory :)

 

Welcome to the forum and thanks for being a Club member.

 

Congrats on your first post! 🥳

 

Blake will probably have some funky math to make this, but I prefer to cheat with these types of animations and animate the viewBox of the SVG. That way I don't need to morph the path or figure out where the target is all the time. I'd do something like this.

 

See the Pen wvpObWa by PointC (@PointC) on CodePen

 

Happy tweening and welcome aboard.

:)

  • Like 1
Link to comment
Share on other sites

24 minutes ago, PointC said:

Blake will probably have some funky math to make this, but I prefer to cheat

 

I like your cheating over my math. Very nice!

  • Like 2
  • Haha 1
Link to comment
Share on other sites

Thanks Craig for the welcome!

Quote

 I prefer to cheat with these types of animations and animate the viewBox of the SVG. That way I don't need to morph the path or figure out where the target is all the time. I'd do something like this.

Ha, I appreciate that -- I already felt a little cheat-y, using the example's slick motion+clipping. :) ...I'll need to keep the viewBox static for this one. 

 

I figure I'll just need to define the path, morph it with some slightly funky math, track the morphing, and use that to update the target (?)

 

Thanks y'all for the quick responses!

Patrick

Link to comment
Share on other sites

7 minutes ago, foundartfactory said:

I figure I'll just need to define the path, morph it with some slightly funky math, track the morphing, and use that to update the target (?)

Yep - I think you could follow Blake's pen here as a guide.

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

 

Happy tweening.
:)

 

  • Like 1
Link to comment
Share on other sites

Quote

Yep - I think you could follow Blake's pen here as a guide.

 

See the Pen 

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

 by GreenSock (@GreenSock) on CodePen

 

Oh, cool! Thanks @PointC & @OSUblake. I can see I'm going to have to get out of GSAP 101 and into the quickSetter(), morphSVGPlugin, and on and on 🤡 ...I'll keep ya posted!

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