Posted January 20 Hi forum, I'm working on a project which zooms in and out a svg graphic, but the problem is that when I continuously click the minus button the svg vanishes and than flips upside down:( Is there any way that you can limit the zoom out function so that it reverts back to the svg starting point / original size? Any help will be much appreciated. Zahir See the Pen ZEYmRpp by AlphaArt (@AlphaArt) on CodePen Share this post Link to post Share on other sites
Posted January 20 Hey Zahir. This is a great use case for modifiers: See the Pen ExaOpRM?editors=0010 by GreenSock (@GreenSock) on CodePen We also recommend that you use GSAP 3's formatting. You're already loading it in the demo, you can just start using the new features like switching out TweenMax for gsap 2 Share this post Link to post Share on other sites
Posted January 20 Hi @ZachSaucier, This is great, but how can I stop it from vanishing when the minus button is clicked continuously? So basically at the start I want the user to zoom in only by clicking the plus button, and then when the user clicks the minus button the svg graphic only zooms out to the original size and stays like that until the user clicks on the plus button again to zoom in. I hope this makes sense. Can you show me please? Many thanks, Zahir Share this post Link to post Share on other sites
Posted January 20 Just change the value of your mn variable. I also made some other improvements in this version: See the Pen bGNQxOO?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Share this post Link to post Share on other sites
Posted January 20 Thank you so much!😀 You are awesome @ZachSaucier 1 Share this post Link to post Share on other sites
Posted January 20 No problem! You might consider adding a "disabled" state or something similar to indicate to users when they can't scale any further. Often times changing the opacity to something less or making it grayed out works great for that. Share this post Link to post Share on other sites
Posted January 20 How do I do that? Sorry for my ignorance. My understanding is at a beginners level when it comes to java script and gsap. Share this post Link to post Share on other sites
Posted January 20 An easy way would be to toggle a class inside of the limits function. I updated the demo above to show how. I am just applying it to the circles but you can apply it to whatever parts you need. Maybe it'd make sense to put all the related parts for each button in a <g> element and toggle a class on that <g> element. 1 Share this post Link to post Share on other sites
Posted January 21 Hi @ZachSaucier, Thank you for help. Is there a possibility to add a a Pinch-to-zoom function to this project as well? Your help is much appreciated. Zahir Share this post Link to post Share on other sites
Posted January 23 On 1/21/2020 at 5:25 AM, Zahir Rafiq said: Is there a possibility to add a a Pinch-to-zoom function to this project as well? Sure, you'd have to implement the logic yourself. Not all devices support pinching though. I'd look into small third party libraries that support that as I am not aware of any native way to include it. Let me know if you do discover a native way! Share this post Link to post Share on other sites
Posted January 24 Thanks for getting back to me. All the best Zahir Share this post Link to post Share on other sites
