zarausto Posted February 10, 2023 Share Posted February 10, 2023 Simple SVG <svg> <path id="guiaPista" d="m101,227.72C243.56,171.41,427.73,56.28,530.04,56.28s286.7,79.31,115.65,160.64c-171.06,81.33-295.52,243.89-62.33,260.82,233.19,16.93,281.64-134.95,421.75-149.37,140.11-14.42,252.71,19.08,222.05,102.98-30.67,83.9-195.11,127.53-276.41,207.96-45.44,86.25,155.47,116.29,219.25,102.23,151.76-26.14,295.53-157.51,458.02-137.34,347.87,106.05-37.39,234.42-187.59,301.58" style="fill: none; stroke: #d83e8e; stroke-miterlimit: 10; stroke-width: 0px;"/> <circle id="ball" cx="50" cy="50" r="50" fill="#d83e8e"/> </svg> Simple buttons <button id="b1" >1</button> <button id="b2" >2</button> With the code above, I need to #ball move along #guiaPistato 20% when click #b1 and 60% when click #b2 using Gsap and MotionPathPlugin. I'll have more five buttons, but with this simple question I can handle after. I know it's pretty simple for you guys, but I ended with animations starting over and not getting back from 60% to 20%. Can someone give me a light? 😃 thanks a lot! See the Pen JjBgXQJ by faustortoloi (@faustortoloi) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted February 10, 2023 Solution Share Posted February 10, 2023 Is this what you're trying to do?: See the Pen BaPXzYB?editors=1010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
zarausto Posted February 10, 2023 Author Share Posted February 10, 2023 Thank you so much @GreenSock I knew it won't be a problem for you guys. I just wanna know something, is it possible to make it smothier when I quickly change buttons? If you click on 1 and then 5 the animation starts from the end =( I've updated the Codepen using timeline: But now the buttons doesn't work -=( Again, thank you so much. Link to comment Share on other sites More sharing options...
GreenSock Posted February 11, 2023 Share Posted February 11, 2023 Sure, here's how I'd handle that: See the Pen OJwKWNq?editors=0010 by GreenSock (@GreenSock) on CodePen You need to calculate the current value based on the progress of the tween at that point. 2 1 Link to comment Share on other sites More sharing options...
zarausto Posted February 11, 2023 Author Share Posted February 11, 2023 OMG I can't believe this is a free support! Thank you so much Jack! 3 Link to comment Share on other sites More sharing options...
GreenSock Posted February 11, 2023 Share Posted February 11, 2023 Happy to help! Yeah, Club GreenSock members make all of what we do possible (and the generous moderators in these forums). Our goal is to give GSAP users the sense that "we've got your back" - something very rare in the JavaScript library space. When it comes to building animations on the web, it's pretty terrible when you find yourself stuck and can't get help. Anyway, enjoy the tools! 👍 1 Link to comment Share on other sites More sharing options...
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