Scaling SVG logo on scroll

Site URL: https://salamander-plane-pf6e.squarespace.com/residential

Friends, hoping someone with more CSS knowledge than me (which is pretty much everyone) can hopefully advise on how I might go accomplishing the following: 

I'm building a simple site to help launch a new brand for a client. We spent a lot of time developing the new visual identity and want to showcase the logo and new name really prominently when you first get to the website.

I've managed to get a SVG logo into my header, but what I really want to do is have the logo display massive and dead center as soon as you get to the site, and then have it scale and move to the upper left corner of the header on scroll. I put together a quick, simple animation to help articulate what I'm describing.

Is this possible? Is there an easier/better alternative to what I'm asking? The animation isn't even necessary - I'd be happy with being able to land on a separate page that just has the logo sized how I want it, that then moves to the homepage on click or something. 

Thank you so much in advance for any help! 

...anyone? Bueller? 

Please post the site-wide password here.

We can then take a look at your issue.

Thanks @creedon! 

Password is: mframe

I'm not finding a SVG of the logo in the header.

Here is the CSS code I'm currently using to get the svg logo to display...

/* tuan -5mi */
.header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/60745ecb1a38bf0adab35cb0/t/607471ec29782c28ffd50276/1618244076196/M-Frame_Logo_White.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

The landing page is going to be easier. Here is a mock up I did. I used the source for the SVG minus the xml tag in a code block. Then hide the header and footer of the page. I didn't have to fiddle with the size to get it that way. It is also responsive because I didn't fiddle with the size. The svg can also be made a link. Although a whole page onclick might be a better option.

Would that work for your need?

@creedon incredible! Can't thank you enough for your help with this man. Really really appreciate it. I think this solution would work more than fine. Do you think it would be a better UX to be able to click anywhere - not just the logo - to reveal the main homepage? 

 I think something like an enter button is most likely to get folks to click-through. Not sure how that would fit in but it's easy to test! 🙂

The next best is probably the whole page click. Most folks I think will click somewhere on a page at least once to see if something will happen. That will require the business plan or above and some Javascript.

@creedon, hope you had a great weekend! Thanks again for all your help with this man, really appreciate it. 

The enter button definitely seems like it makes more sense. What would that process look like in terms of getting that implemented? Would I just be adding a new page with the custom code you used to hide the header/footer and display the logo, and then setting this page as the homepage? 

Very grateful for your assistance. 

Quote

What would that process look like in terms of getting that implemented?

What you have described is pretty much it. Throw in the button and I think you'll be good. Once you've created the page if you post the URL here we can help with the CSS to hide the header/footer.

Awesome! Would you mind sharing the CSS I should use to display the svg logo large and centered like you have it above? 

No CSS used for the positioning/size. I just threw the SVG code in a code block and set the page sections as follows.

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<!--

  hide page header and footer
  
  Version      : 1.0
  
  SS Version   : 7.1
  
  Notes        : this effect is not active in SS Preview to test it use full
                 preview < https://bit.ly/3vncHIf > or private browsing
                 < https://bit.ly/3f6lhq2 >.
                 
  By           : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    body:not( .sqs-edit-mode ) #header,
    body:not( .sqs-edit-mode ) #footer-sections
    
      {
      
        display : none;
        
        }
        
    </style>

This is for v7.1.

Let us know how it goes.

Thanks so much for all your help @creedon! 

I'm now encountering another issue with my SVG logo...

Depending on my browser window size, it looks like my logo is sometimes getting cropped on the right edge - right where the registration mark appears. (See attached screenshot.)

Forgive my ignorance, but it's almost as if my logo is placed behind a frame that sometimes covers it. 

Here is the CSS I'm using to apply and format the svg logo. 

/* tuan -5mi */
.header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/60745ecb1a38bf0adab35cb0/t/607471ec29782c28ffd50276/1618244076196/M-Frame_Logo_White.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center left;
}

@noctisariel

This is more of a work-around than a solution. Add the following to your .header-title-logo a ruleset.

margin-right : 2px;

Let us know how it goes.
 

Wonderful, fixed it! Thank you very much. 

@creedon, sorry to bring this back from the dead (and please excuse my ignorance), but how would I go about finding the SVG code you referred to? I've managed to get the header and footer hidden, but I just can't get the SVG logo to display on this page. 

As always, REALLY appreciate your help. 

As an alternative to getting at the source of the svg you can refer to it using an image tag in a code block.

<img src="https://static1.squarespace.com/static/60745ecb1a38bf0adab35cb0/t/607471ec29782c28ffd50276/1618244076196/M-Frame_Logo_White.svg"/>

To get to the source put that url in the address bar of your browser, then view source of the page.

Thanks @creedon, I'm still really struggling with getting this SVG logo to display the way you had previously. Every time I past the code into a codeblock, it displays the code - not the logo. What am I missing?

Sounds like you might have turned on Display Source.

Use the following settings.

Man, I'd be lost without you! This worked perfectly. Thanks for all your help throughout this process. I appreciate it so much!