Jump to content
Search Community

Zooming in on SVG element

ThePixelPixie test
Moderator Tag

Recommended Posts

I have quite a few CSS transforms applied to an SVG. But I'm trying to zoom in on an individual element when it's clicked (the red space in this case). I've gotten the xy coordinates from getBoundingClientRect. But the zoom is "off". I had found an old TweenMax script that did generally what I was looking for, so that's what's in this pen. I'm not sure how to adapt it properly for GSAP3, but it does seem to be zooming regardless. It's just not zooming to the right coordinates. Help?

See the Pen WNzqNYx by ThePixelPixie (@ThePixelPixie) on CodePen

Link to comment
Share on other sites

That's mostly a math thing and has nothing to do with GSAP. I definitely wouldn't use the old legacy TweenMax syntax. Also, be VERY careful about having CSS transitions on elements that you're animating with GSAP. That'll totally get in the way of GSAP. It'll try to set a property on every frame but CSS transitions will be like "nope, I won't let you...I'm gonna stretch that out over a bunch of frames..." (which is also terrible for performance). 

 

Here's one approach that saves you from many of the math headaches. You'd need to animate a container to avoid all the complications with your 3D transforms and transform origins:

See the Pen yLKdNWy?editors=1010 by GreenSock (@GreenSock) on CodePen

 

I hope that nudges you in the right direction at least. 

Link to comment
Share on other sites

@GreenSock - That helps a LOT. Thank you. I'm actually attempting to adapt this pretty old script (apparently from 2016) without the list and pins, but it does use a lot of CSS transforms. Would GSAP be able to work for recreating the levels, surrounding area, and animations, clicking from space-to-space, level-to-level, etc?

 

https://tympanus.net/Development/Interactive3DMallMap/

Link to comment
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.
×
×
  • Create New...