Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Zahir Rafiq

Stop it from vanishing and flipping

Recommended Posts

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

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 :) 

  • Like 2

Share this post


Link to post
Share on other sites

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

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

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

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.

  • Thanks 1

Share this post


Link to post
Share on other sites

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
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

Thanks for getting back to me. 

 

All the best 

 

Zahir

Share this post


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.

×