Dzoniis Posted May 13, 2021 Posted May 13, 2021 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
PointC Posted May 13, 2021 Posted May 13, 2021 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. 6
Dzoniis Posted May 13, 2021 Author Posted May 13, 2021 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.
OSUblake Posted May 13, 2021 Posted May 13, 2021 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. 1
PointC Posted May 13, 2021 Posted May 13, 2021 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. 2
GreenSock Posted May 14, 2021 Posted May 14, 2021 I don't think this is really what you're looking for, but there is a Helper Function for converting anchor points to progress values - see https://greensock.com/docs/v3/HelperFunctions#anchorsToProgress
Dzoniis Posted May 14, 2021 Author Posted May 14, 2021 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
OSUblake Posted May 14, 2021 Posted May 14, 2021 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. 3
PointC Posted May 14, 2021 Posted May 14, 2021 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. 2
Dzoniis Posted May 14, 2021 Author Posted May 14, 2021 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..
GreenSock Posted May 17, 2021 Posted May 17, 2021 I assume you wanted something like this?: See the Pen RwpRdVV?editors=0010 by GreenSock (@GreenSock) on CodePen. 2
mikel Posted May 19, 2021 Posted May 19, 2021 Hey @Dzoniis, Here comes another option ... See the Pen KKWNvNL?editors=1010 by mikeK (@mikeK) on CodePen. Happy scrolling ... Mikel 5
Dzoniis Posted May 20, 2021 Author Posted May 20, 2021 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... 3
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now