Jump to content
Search Community

Trying to make this banner scalable/responsive to browser window

cr33ksid3 test
Moderator Tag

Recommended Posts

Any gurus out there figure out how to make a vector SVG scale with whatever size you make the browser window? I've tried a few things regarding hero or slider banners but they just don't seem to work like I would expect. What I expect is to have this animation and graphics all proportionally size depending on the size of the browser window... or media query that is thrown at it. And without manipulating all the elements of the  SVG for each size. I would think this is available somewhere but I just have not found it yet. Point me in the right direction and/or tell me what I need to do to accomplish that. I'm new to animated SVG and GSAP so be gentle. Thanks in advance...

See the Pen JjjmmXX by cr33ksid3 (@cr33ksid3) on CodePen

Link to comment
Share on other sites

Zach:

 

Slightly off topic but related to this project of mine... I have polygons that I want to have criss cross each other. There is a large one and a small one. I need to have two of the large one, at the same time, criss cross on the banner like a flash or glint. Same for the small one but at a different time. I thought I could do something like...

var glintSm1 = document.querySelector('#aeAd-glint-sm');
var glintSm2 = document.querySelector('#aeAd-glint-sm');
var glintLg1 = document.querySelector('#aeAd-glint-lg');
var glintLg2 = document.querySelector('#aeAd-glint-lg');

...to make 4 different variables from the two polygons. However, when I try to use them, it seems like I am only animating them together even though one is using the To and the other the From Tween... Has this been solved somewhere that you know of? I couldn't find an example...

Link to comment
Share on other sites

30 minutes ago, cr33ksid3 said:

to make 4 different variables from the two polygons

You can't create new elements simply by creating two selectors for the same object. You can only animate the entire object, so most likely you need 4 objects. Selectors are not magical wands that create elements, they just get things that are already there :) 

 

Does that make sense?

  • Like 2
Link to comment
Share on other sites

  • 4 months later...

<script>
    resizeProject = function () {

        resized = document.getElementById("myDiv");
        widthToHeight = 1 / 2;
        newWidth = window.innerWidth;
        newHeight = window.innerHeight;
        newWidthToHeight = newWidth / newHeight;

        if (newWidthToHeight > widthToHeight) {
            newWidth = newHeight * widthToHeight;
            resized.style.width = newWidth + "px";
            resized.style.height = newHeight + "px";
            resized.style.maxWidth = resized.css("max-width");
            resized.style.maxHeight = resized.css("max-height");
        } else {
            newHeight = newWidth / widthToHeight;
            resized.style.width = newWidth + "px";
            resized.style.height = newHeight + "px";
            resized.style.maxWidth = resized.css("max-width");
            resized.style.maxHeight = resized.css("max-height");
        }}
        
      window.addEventListener("load", resizeProject);
      window.addEventListener("resize", resizeProject);
      resizeProject();
</script>

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