Jump to content
GreenSock

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

Move image along svg path

Recommended Posts

Hello,

 

I have svg with two paths, i need second path to follow first path, i tried with tween and motion but cant make it work at all, does anyone have an example or something that can help me resolve this problem

Link to post
Share on other sites

Hi @Dzoniis :)

 

Welcome to the forum.

 

Are you just asking about basic usage of the motionPath plugin? Here's an example of a spiral path and a rectangle animating along it. 

See the Pen PoWBYXm by PointC (@PointC) on CodePen

 

The docs should have most everything you need to dive deeper into the plugin.

https://greensock.com/docs/v3/Plugins/MotionPathPlugin

 

If that's not what you're asking, could you please provide a simple demo?

 

 

Happy tweening and welcome aboard.

:)

 

  • Like 6
Link to post
Share on other sites

Hey, this worked fantastic :) but i have another problem, i need it to go to certain point on click, can you provide me with documentation for that if i can use motionPath plugin at all..

This is my codepen :) 

See the Pen qBrZNex by nikolamilovac (@nikolamilovac) on CodePen

Link to post
Share on other sites
1 hour ago, Dzoniis said:

i need it to go to certain point on click, can you provide me with documentation

 

There's no documentation for something like that. It's going to require some custom JavaScript.

 

And what do you mean click? Do you mean click anywhere on the path and have the bike go there? If so, that can be extremely complicated. Or do you mean click on visible points on the path, and have the bike move there? Like predetermined points? That's a little bit easier.

 

  • Like 1
Link to post
Share on other sites

Yep. As Blake mentioned we need some more info from you. If you just want it to stop at a certain point on the path, you can use the end property.

 

From the docs:

Number - The position along the path at which to end, where 0 is the beginning, 1 is the end, and 0.5 is in the middle. It can be any positive or negative decimal number, including a value that's less than the start (which would make the object travel backwards). For example, 0.3 would have the element end at the 30% point along the curve. 1.5 would make it loop around back to the beginning and stop at the halfway point. Default is 1.

 

 

  • Like 2
Link to post
Share on other sites

Main problem i am having is that i can't set start/end and how do i call that on click, what i am trying to achieve is that while im having this svg on bottom of the page, when i use scrollTrigger to move horizontal slides for this svg ( bicycler to follow path-track to specific point )

Below is the codepen with svg and my failed code...

https://codepen.io/nikolamilovac/pen/qBrZNex

Link to post
Share on other sites

Maybe these pens by @mikel can help point you in the right direction. As I said earlier, this is going to involve some custom JavaScript. This forum is for help with gsap's API, not for building projects.

 

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

 

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

 

 

  • Like 3
Link to post
Share on other sites

I think those pens Blake posted should help.

 

Just FYI - your current setup with start: 0.5 and end: 0.7 aren't working the way you'd think because those are way outside of the viewBox. Your motion path is over 16,000 pixels wide and the viewBox is set to 500 wide. To see the bicycle in the current view you'd probably want something around start: 0.05 and end: 0.09. Since this is a simple horizontal move, you could animate the viewBox left and right while keeping the bicycle centered in the view. Lots of ways to do it really, but as Blake mentioned, we can't really build full projects. We're happy to assist with any and all GSAP related questions though.

 

Happy tweening.

:)

 

  • Like 2
Link to post
Share on other sites

Hello, thank you all for your patience and responses :)

I think i didn't explain my problem fully, main issue is that i can't apply second path ( #target ) to ( #path ), i saw that scrollTrigger gives me options to move that svg along the line of path, i just can't seem to find a way to connect it in proper manner... i've tried using official greensock codepen "Horizontal section scrolling" but can't apply it to my example.. 

I have scrollable sections ( horizontal ) and whenever i scroll i need svg to move 

See the Pen ZEeWPEN?editors=1111 by nikolamilovac (@nikolamilovac) on CodePen

 
This is so cloose

on forward scroll, its going too fast and jumping..

Link to post
Share on other sites

Oh my god, you guys are all amazing!!

 

Thank you so much, i was able to solve it by combining all your answers!!!

 

Thank you all for your effort and time once again...

  • Like 3
Link to post
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.

×