en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en ms en en en en en en en en en en en en en en en en en en en en en en en en en en en en en nl fr en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en fr en en en en en en en en en en en en en en en en en en en en ms en en en en en en en en hu en nl en fr en es en pt en de en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
I have an SVG that has to cover the entire viewport, so I added "xMidYMid slice" for aspect ratio, but now I am unable to position an element inside it.
I would like to scale down the globe logo to a given size (54px) and move it exactly to the top left corner.
Could you please help me out? 😇
See the Pen rNdxmwb?editors=1010 by adelkov (@adelkov) on CodePen
Hi @adelkov welcome to the forum!
You can use .getBBox()  to get coordinates from the SVG space (read more about it on the MDN docs). And then I would find the origin point from where you want to transform the element and that that as the svgOrigin (check more about it in this forum thread)
See the Pen eYMgWyv by mvaneijgen (@mvaneijgen) on CodePen
GreenSock    17,226 Likes (Superhero)
There are many approaches you could take...
One is to just let Flip plugin do all the work for you, either by using a "dummy" element that you put in the spot you want it to go (and at the appropriate size), and then Flip.fit() to that:
See the Pen XWEpRLV?editors=0010 by GreenSock (@GreenSock) on CodePen
I put a red outline around the "dummy" element just so you could see it, but obviously you'd remove that.
Or you could build your SVG so that the globe fills the viewBox, but initially gsap.set() the scale to a smaller value to keep it at the proportion you want when it's full screen. Then, to make it to go 54x54 in the top corner, you could use Flip plugin to get the state, then add a class that completely changes its positioning in the DOM so that the   is 54x54, top: 0, left: 0, maybe position: fixed with the scale removed from the logo artwork, and then Flip.from() the previous state. It would look seamless but you'd end up in the final state you want. Plus it'd be responsive.
There are quite a few other ways to accomplish it. Hopefully this gets you going in a helpful direction.
Share on other sites
adelkov    3 Likes (Newbie)
Thank you both for the answers
I ended up using the Flip plugin - it was precisely what I needed.
What an amazing library and community, thank you so much! 🙏
Share on other sites
Create an account or sign in to comment
You need to be a member in order to leave a comment
Sign up for a new account in our community. It's easy!
Register a new account
Already have an account? Sign in here.
Sign in to follow this   Followers 3
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
Positioning element inside a sliced SVG to the corner of the screen
“I really need to commit to using GSAP more in my daily work & demos. I love pushing native CSS animation as far as I can but every time I use GSAP I’m just blown away. Keep up the great work!”
“GSAP and CSS Transitions: I've done both, and its like comparing an F16 to a horse. Take like 10 minutes to try.”
“If every library were as robust and reliable as GreenSock’s, the world would be a much better place for software engineers and their clients. I can't think of a better designed or better performing tool, and as a bonus, it's fun as heck to play with.”
“Spent today converting an animation to pure CSS, and then into GSAP. GreenSock was an order of magnitude easier. Love it.”
“This is why I have absolutely no issues with paying for a subscription to GSAP, great product and awesome forum!”
“I will never say it enough but @greensock you are absolutely amazing and you have no idea how much time and brain cells I have spared thanks to you 🥰”
“Go and browse through FWA or Awwwards, then view source of anything you see that has cool animation and you will be surprised how widely GSAP is used.”
“I continue to be astounded by the sheer breadth of what @greensock can do. Every time I'm like "ooh, I wonder if I can do X", it turns out I can!”
“I've never worked with a product that has such fantastic and enthusiastic support. GreenSock is incredible in its own right, but the team behind it is really what makes it shine.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.