Working with Zooming in and Out of the Viewbox

[adamoc]

Hi there, I nearly have this short animation finished , the problem i'm having is working with the viewbox . So when the logo is made i want to move it to the position it ends up which is perfect the problem i'm having is in order to move the object into the center at the start i make the svg width almost 100vw and height respevctively almost 100vh but then as it's animating back into it's position in the corner it has to change these width and height values to scale down the logo and also in order for me to put other elements alongside the SVG in the top section so I'm wondering it almost works perfectly but you can see as it's changing it's width and height values it becomes enormous rather than smaller at the start and i'm just wondering is there a way to make it scale smaller as it moves rather than large and then to the exact position and dimensions i need ? Thanks Adam 

See the Pen pojYrNE by Adamoc (@Adamoc) on CodePen

[ZachSaucier]

Hey Adam. 

 

Depending on your screen size, the element isn't centered in the first place.

 

I'm not quite sure I understand why you're using two SVGs here. I think it'd be a lot easier if you combined them into one SVG in a vector editor before trying to do anything.

 

Side notes:

• Max/Lite stuff is old. Just use gsap.to(), gsap.timeline(), etc.
• Anytime you use/see a long list of selectors like that you should think: how can I avoid doing this? 99.9% of the time you can use either 1) a more general selector or 2) a shared class to select all of those elements that you need. In this case a good idea would be to put all of the pieces in a <g> element.
• Bounce.easeOut is the old form. We recommend the new form, in this case it'd be "bounce".
• This: `${-50} ${-80} ${770} ${270}` doesn't make much sense. If you aren't using variables or calculating anything then just use a string: "-50 -80 770 270".
• In GSAP 3 we recommend that you put the duration inside of the vars parameter.

 

[adamoc]

Hi Zach , i've taken all these things onboard and suppose the reason why i was using the two svg's was that i thought it morphed into the other but reading through some documentation as stated by you it's not actually morphing into the SVG it just takes the path of the other SVG and goes into that path but actually is the same SVG , therefore i moved the actual logo part into the original SVG as a group so it's still able to morph into the desired paths. I've updated my code to GSAP 3 per your recommendations I think all of it is in order so now to my problem , what can i do to achieve the effect i want. Below is a pic of the end result i want to achieve just for your understanding (after the animation ends like).

 

https://cdpn.io/Adamoc/debug/pojYrNE

 

See the Pen pojYrNE?editors=1010 by Adamoc (@Adamoc) on CodePen

 

[ZachSaucier]

Make sure that you save (or preferably fork - found in the bottom right of the CodePen screen) your work. What I'm seeing is the old stuff  

[PointC]

I can think of very few occasions when it would be preferable to use multiple SVGs. I'd almost always recommended one and using groups where needed. As I've said many times, easy SVG animation comes down to three things.

1. Asset prep
2. Asset prep
3. Asset prep

Most of your SVG animation work takes place in your vector software. Get that right and the GSAP code will probably be done in a few minutes. Take notes about coordinates while you build and use a background rectangle when exporting so you don't get weird transforms or wacky viewBox settings. Animating the viewBox also works best when keeping the attribute in the same aspect ratio as the entire SVG.

 

Just my two cents. Happy tweening.