Jump to content
Search Community

Is this possible: Animating along a path

Darthmaul test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello there

 

I have been searching on this forum for a day or two and haven't really been able to come up with much, but I apologize if this is a repeat question or if this is out of place.

 

I have a custom SVG that is a road(see attached). I have a car image that I want to animate along the path of this SVG as the user scrolls. I have an implementation that kind of works right now, but the main problem I have is how this thing scales for different browser sizes. It's pretty impossible to scale my page around it because this whole thing scales anytime there's a change in browser size.

 

My question is: Can I accomplish this using these libraries, and will it scale properly? Or do I need to look elsewhere(something like ScrollMagic)

 

Thank you for your time and let me know if you need more information.

 

Road(whole).svg

Link to comment
Share on other sites

Sure, this should be relatively easy if your car is also in the same SVG (so that everything can scale together). MorphSVGPlugin has a pathDataToBezier() function that could help a lot: https://greensock.com/docs/Plugins/MorphSVGPlugin/static.pathDataToBezier()

 

If you still need some help, just whip together a simple codepen with your assets so we can see what's going on and more quickly diagnose any issues. 

 

Happy tweening!

  • Like 3
Link to comment
Share on other sites

  • 4 weeks later...

Hey there!

 

Hope I'm not breaking any rules by replying to this late. I really appreciate the response! I have been waiting to work on this until I got a free minute.

 

So I've got the codepen set up

See the Pen erZVOP by PhsycBarge (@PhsycBarge) on CodePen

 

I've tried to create the motionpath using the plugin you linked, and then tried to use tween to animate the car(#dot) along the path.

 

I think it animates along the path as soon as the page loads, however I'm not exactly sure. My main question is, how do I get this behavior(animation along the path) to go with the scrolling of the browser?

 

Thanks and I appreciate any information you can offer

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.
×
×
  • Create New...