MotionPath postion/orientation

[flysi3000]

Hi! I'm trying to use the amazing MotionPathPlugin for a little animation of a series of objects that fall and bounce onto a surface. I've gotten the object following the motion path, but there are a few things I don't understand. It looks like the animation starts in the center of my container, and I can't seem to override that - I'd like the objects to start offscreen and animate into position and land on the blue surface. Also, I have MotionPluginHelper going, but the path looks like it's flipped 180 degrees - I'm sure it has to do with the path direction, but I'm not sure how to reverse it. 

 

Finally, if you hadn't guessed, these will end up being in some banner ads, and I'll want to resize them for a couple of different dimensions; is there a clever strategy to make this flexible for those different dimensions (ie. make them sort of "responsive")?

See the Pen KKGyyRx by flysi3000 (@flysi3000) on CodePen

[Rodrigo]

Hi,

 

The issue here seems to be related to the starting position of the element. If you remove all the GSAP part of your JS code you'll get this:

 

What you have to do is set the initial position of your camera according to that and then set your Motion Path so it ends in the position you want. I'd recommend you to set a regular animation from the start point to the end point, something like this:

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

 

Based on that, the path you pass to the Motion Path Plugin should start in -190, -140 and end in 110, 19 so the camera ends in the position you seem to want. Unfortunately I don't have a lot of time now to dig into the example and create a path that emulates the motion you want, but hopefully the codepen and the values are a good starting point for your project.

 

Let us know if you have more questions.

Happy Tweening!