Moving a Gif along a SVG line on scroll

[sam_tween_journeyer]

I want the Dragon gif to move from the right to the left of the screen along the wiggly SVG line.  The SVG line should stretch to full width.

 

I've tried adapting a GSAP tutorial but the gif is stuck to the left of the line, not the right, it needs to ALWAYS start off page really, on the right, and swoop across and away.  Tweaking the original SVG line got it to jerk across, I'd prefer a motion which completes the screen traverse by the time the user scrolls a screen height. 

 

All thoughts appreciated on how to improve.

 

Finally when you take a tutorial from codepen it has ALL the gsap .js files appended, how do you know which ones you need for a certain page?

See the Pen poPJNob by Sam654657987 (@Sam654657987) on CodePen

[mikel]

 

hey @sam_tween_journeyer,

 

Welcome to the GreenSock Forum.

 

Hmm - I don't know what your construct is about.
Here is a simple version with GSAP ScrollTrigger.

 

See the Pen MWmwpWN by mikeK (@mikeK) on CodePen

 

1 hour ago, sam_tween_journeyer said:

Finally when you take a tutorial from codepen it has ALL the gsap .js files appended, how do you know which ones you need for a certain page?

 

That means convenience. You just use what you call up in the code.

 

Happy scrolling ...

Mikel

 

[Trapti]

@sam_tween_journeyer hey,

 

Here it is with scroll trigger. 

See the Pen rNmVymx?editors=1010 by tripti1410 (@tripti1410) on CodePen

 

[Cassie]

Just droppin by to say I love this little dragon pen. 👀

 

This looks like it's for a cool project - do we get to see when it's finished?

[mikel]

 

If you want the dragon to fly in both directions, here is an example:

 

See the Pen KKWNvNL by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

 

[sam_tween_journeyer]

3 minutes ago, mikel said:

 

This is perfect, thanks so much Mikel.  Specifically showing me how to put a non-vector image in SVG was great.

 

 

 

 

Happy scrolling ...

Mikel