GSAP MotionPathPlugin: Align The Path to The Element?

[fuzzyfluid]

Hi there, I've spent a few days researching SVGs, generating Paths, etc. I'm aware of the align property on the motionPath object, however, my asset aligns to the path (Codepen here: )., butIs it possible to have the path align to the center of where my element is already positioned rather than aligning my element to the beginning of the path?

 

Question 2:

MotionPath from the examples seem great and replaced bezier curve, but are animations such as this still possible with gsap such as this codepen: https://codepen.io/shafi_49/pen/ENWXxL? I'd like to just make a box roll and tumble as if it were kicked across the floor and think a path for that is a bit overkill, but maybe i'm wrong here. T

 

Thanks a ton,

See the Pen YzamJpq by fuzzyfluid (@fuzzyfluid) on CodePen

[fuzzyfluid]

All right well in regards to #2, i figured out I could use  for example  path: [{x:0, y:0}, {x:150, y:405}, {x:350, y:225}] as part of the motionPathPlugin so that's awesome. In regards to the example above, is it wrong to assume a path can align to the original position of my element? All the examples I see align the element to the path, not align path to the element?

 

Any advice or is that just not the right usecase or am I thinking about this incorrectly?

[Carl]

hi

 

if you're asking for your blue <path> to be moved inside it's containing <svg> so that it aligns with an <img> you have somewhere in a <div> somewhere else on your page, no MotionPath Plugin doesn't do that.

 

 

[GreenSock]

1 hour ago, fuzzyfluid said:

In regards to the example above, is it wrong to assume a path can align to the original position of my element? All the examples I see align the element to the path, not align path to the element?

Carl is correct. And if you're trying to essentially make it act like the path was moved to line up with where the target starts, you can align: "self" (that doesn't actually move the visual path or anything - it's just the data for the invisible path it travels on)

[fuzzyfluid]

Thanks everyone appreciate it.