Share Posted January 20, 2020 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 Link to post Share on other sites
Share Posted January 20, 2020 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 Link to post Share on other sites
Author Share Posted January 20, 2020 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 Link to post Share on other sites
Share Posted January 20, 2020 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 Link to post Share on other sites
Author Share Posted January 20, 2020 Thank you so much!😀 You are awesome @ZachSaucier 1 Link to post Share on other sites
Share Posted January 20, 2020 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. Link to post Share on other sites
Author Share Posted January 20, 2020 How do I do that? Sorry for my ignorance. My understanding is at a beginners level when it comes to java script and gsap. Link to post Share on other sites
Share Posted January 20, 2020 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 Link to post Share on other sites
Author Share Posted January 21, 2020 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 Link to post Share on other sites
Share Posted January 23, 2020 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! Link to post Share on other sites
Author Share Posted January 24, 2020 Thanks for getting back to me. All the best Zahir Link to post Share on other sites
