Zooming SVG viewbox

[NickNo]

Hi, I'm looking for some help on structuring gsap code for zooming in and out of a SVG (by animating viewbox). I've mocked up the behaviour I want, but I'm sure there is a much better way - using timelines? functions? In the example, if you click on one of the circles, it zooms in, then click again (or on background) to zoom back out. If you click between B&D a bit you'll notice some weirdness...

 

Ideally what I want is click to zoom in, click to zoom out - if you click on another circle it zooms out from where you are before zooming into the new circle...  I hope that's clear  and appreciate any tips!

See the Pen WNKbWBP by nickjacobsnz (@nickjacobsnz) on CodePen

[Rodrigo]

Hi,

SVG is not something I'm very well versed on but luckily we have some SVG superstars around here.

 

Check this tutorial by @PointC:

https://www.motiontricks.com/basic-svg-viewbox-animation/

 

Also check this video by @Carl

Also I know that Carl has a bunch of really solid resources in his courses and he's an excellent teacher, you should definitely check it out:
https://www.creativecodingclub.com/bundles/creative-coding-club?ref=44f484

 

Hopefully this is enough to get you  started.

 

Happy Tweening!

[Carl]

@Rodrigo thanks so much for the kind recommendation regarding my courses.

 

@NickNo it looks like you have a good understanding of animating the SVG viewBox. Thanks for providing such a nice demo to work with.

 

I don't have a lot of time to rework this or go over every aspect but hopefully the following will help a bit.

 

When it comes to interactivity like this it can often become troublesome to manage the states of multiple pre-created tweens especially  since each of your 4 tweens are animating the same thing (viewBox of the svg). 

 

There are a few variations of how to approach this but the end result should be something that creates the animations that you need when you need them. In your case you should create animations when the user clicks on things. 

 

Since you provided all of the viewBox settings I went ahead and added them to each group as a data-box attribute

 

<g id="A" data-box="40 40 400 400">
        <circle fill="#FF0096" cx="131" cy="130" r="78"/>
        <g>
            <path d="M125.3,145.7c-2.3,2.9-7.9,2.9-16.6,0c-1.9-0.9-2.7-2.6-2.6-5.2c1-15.9,7.4-29.7,19.1-41.4c3.3-2.8,7-2.1,10.9,2.3
                c10.6,14.3,15.6,28.1,15.1,41.3c-0.7,4.5-5.9,5.7-15.6,3.8c-2.8-0.7-4.4-4.3-4.7-11c0,0-0.9,0-2.6,0

In the js I create an array of all your groups called btns and loop through it and give each button

• a clicked property of false
• a click eventListener that checks if the clicked property is false
  • if false then tween to the viewBox to this btns data-box value and set clicked to true
  • if true then tween back to the default viewBox view and set clicked to false

const btns = [A, B, C, D]

btns.forEach((btn, index) => {
  btn.clicked = false;
  btn.addEventListener("click", ()=> {
    console.log(btn.dataset.box)
    if(!btn.clicked){
      gsap.to(Wall, {attr:{viewBox:btn.dataset.box}})
      btn.clicked = true
    } else {
      btn.clicked = false
      gsap.to(Wall, {attr:{viewBox:"0 0 800 582"}})
    }
  })
})

 

 

See the Pen WNKvRaj?editors=0010 by snorkltv (@snorkltv) on CodePen

 

 

20 hours ago, NickNo said:

Ideally what I want is click to zoom in, click to zoom out - if you click on another circle it zooms out from where you are before zooming into the new circle

 

That gets a bit more complicated as you will have to tie multiple animations together and you have to deal with situations where the user may click fast like: click on A and then B but while A is zooming out they then click on C.

 

[GreenSock]

Just in case any of these links are helpful (most use the old GSAP 2 syntax, but the concepts are the same): 

 

 

See the Pen oGoyYb by osublake (@osublake) on CodePen

[NickNo]

Thanks everyone for the comments, and Happy New Year!  @Rodrigo yes I've subscribed to Carl's courses 👍