Jump to content
Search Community

Scale SVG to fill viewport, without causing scrollbars?

Pr3fix test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

 

I have a fairly complex app using lots of code so it's difficult for me to extract just the problematic bit, but I've given it a go.

 

I have an SVG (white circle), which I am trying to overlay text content onto. The circle is animated to/from a couple of locations on the page. After a specific event occurs on my page, the circle is to "expand" to fill up the ENTIRE viewport of the user. The circle is to be visible on the background, so that the foreground content (text, etc.) does not get obscurred. It's just supposed to be a visual element indicating something has completed.

 

I should note, that the animation lives on a page using a responsive CSS grid ( Toast ) as the page needs to be adaptable to browser site and displays content differently depending on screen size.

 

I am running into a couple of issues:

 

1. the circle, while appearing to expand in the codepen, does not cover the entire screen on large resolutions. If you have a big enough monitor, you can see the "edge" of the circle. It's just really big, but still only scaled. I need to make sure it covers the entire viewport regardless of size.

 

2. On certain browsers (namely all IE), the expand causes overflow scrollbars to appear, "stretching" the page to fit the SVG. This should not happen. I was having this issue with all browsers for awhile, but found a hacky workaround which seems to work for Chrome/Firefox/Safari, but not IE.

 

3. all other page content should be left unchanged by the circle expanding. It should maintain location/visiblity throughout.

 

 

Any tips much appreciated :)

 

TL;DR: "how do I make an SVG element expand to fill the user viewport without stretching the page or covering other content?"

See the Pen MwRZLz by anon (@anon) on CodePen

Link to comment
Share on other sites

Check out this thread...

http://greensock.com/forums/topic/12010-tweenmaxjs-scale-animation-is-laggy-on-desktop-firefox-and-mobile/

 

And this demo...

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

 

I used canvas because SVG is slow. In the code will see how it finds the correct distance to the edge of the screen. I made it so it would hide text, but you could just put it in a container behind your text.

  • Like 1
Link to comment
Share on other sites

Is there a reason you are using SVG for that?

 

But it really doesn't matter what you're using when you are scaling something 15x as a guess. You need to calculate the size it should be to make sure it cover the entire screen. This will also make sure that it doesn't go into overflow, causing the scrollbars to show. To get it behind your text, you're probably going to have do some layering and absolute positioning.

Link to comment
Share on other sites

Here's another canvas example I helped somebody with. It's kind of the reverse of what you want, but it's still responsive. However, I would have done the calculation different. He just used the width of the body, but you should use the distance from the center of the screen to a corner.

 

See the Pen WvOMzJ by johnheiner (@johnheiner) on CodePen

  • Like 1
Link to comment
Share on other sites

Part of the issue is the SVG is not scaling from absolute center. Basically, the page fades in wit the circle in the center. Then it animates to the middle-left (grid system). There's a count-down, and when the countdown reaches 0, the circle expands.

 

I'm using SVG because I wasn't sure how to integrate canvas into this (not only does the circle expand but also relocates around the screen before doing so), and I'm also just not very familiar with the canvas API. I'd be happy to swap it out for canvas though if I could figure out how without breaking everything currently on the page.

Link to comment
Share on other sites

I'm having a hard time even understanding your layout. Code wise it doesn't look bad, but I'm not sure what's going on there.

 

I would suggest you just start over with my first example. I know learning the canvas can be hard, but it's worth it. The reason I asked why you were using SVG is because it has its own coordinate system. It's not going to do what you might think it should. I forked that second demo and but some SVG circles behind the text. It looks centered, but resize the screen. The animations are getting all of whack because the coordinates are being scaled.

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