MotionPath for Image - Responsive Motion Path Diagonally Across Viewport

[charlie_sage]

Hi there, I am fairly new to greensock and wd in general. After watching all the videos and reading through the documentation, I still cannot figure out why this code is not working properly. 

What I am trying to do: 

Utilize the MotionPath plugin to get an image to move from the bottom/left,  -> top/right of the screen where it either disappears or fades out and stays hidden unless it's moving across the screen. Once I get that in, I will be adding a timeline where the plane appears to drag another image across the screen along the same path and from there some text will be revealed via tween.to, which I think I can make work once this issue is resolved. 

Issue:  

I can't seem to get the initial image/plane to move along the path (or move at all)that I need or make it responsive. The path that is in the svg now is a place holder that I was going to edit once I got the plane moving.  I have tried placing the img both inside and outside the svg, along with everything else I could think of. The codepen is attached if someone can take a look. 

 

If anyone could assist, I would appreciate it so much.

 

See the Pen by pen?template=oNpmmNm (@pen?template=oNpmmNm) on CodePen

[akapowl]

Hello @charlie_sage

 

Welcome to the GreenSock forums and the wonderful world of web development 🙃

 

The path data in your HTML is not within quotation marks and it needs the d attribute to be recognized as path data.

 

// bad
<path id="path" fill="none" M8,102 C15,83 58,25 131,24 206,24 233,63 259,91 292,125 328,155 377,155 464,155 497,97 504,74 />
  
  
// good
<path id="path" fill="none" d="M8,102 C15,83 58,25 131,24 206,24 233,63 259,91 292,125 328,155 377,155 464,155 497,97 504,74" />

 

 

 

Also, here I set the alignto the path too, and set an alignOrigin instead of the initial transforms you set beforehand. Works better now

 

See the Pen KKZJLzq?editors=1010 by akapowl (@akapowl) on CodePen

 

[charlie_sage]

Thank you @akapowl! I just knew it was something simple that I was missing. 

[charlie_sage]

@akapowlsorry to bother, quick question: do you see any reason that line would not be editable in codepen? I only made the changes that you mentioned above. I am unable to select the line and adjust the path. 

[akapowl]

It should be editable in my pen. I added pointer-events: none in the CSS there to the .container, as it is sitting on top of the SVG (z-axis wise) and thus is blocking it.

 

I'm not at my desk for a while, so I won't be able to help more than that. Hope it will help though.

[charlie_sage]

@akapowl that took care of it! Thanks!

[akapowl]

1 hour ago, charlie_sage said:

that took care of it! Thanks!

 

It was just a quick and dirty workaround though. Better change the overall structure of your HTML.

 

See the Pen ExoMLzb by akapowl (@akapowl) on CodePen

[charlie_sage]

@akapowl thank you! That actually helped quite a bit.