Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sam_tween_journeyer

Moving a Gif along a SVG line on scroll

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

 

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

 

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

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?

  • Like 2
Link to comment
Share on other sites

 

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

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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

 

 

  • Like 2
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.

×