Scaling logo on scroll

Notes about how it was built

Used GSAP panel
The key trick is to have a spacer section as a trigger, because triger height and logo height are connected.
Example of gsap animation as code: LINK

Variables

I set variables to try make it adjustable. Of course, you can put your values according to your design, and first of all, sizes of your logo

Calculate the proportions of the vector logo ([logo-width-ratio] : [logo-height-ratio]). I used it for ratio.
- [logo-width-ratio] = 32, [logo-height-ratio] = 10 (numbers, not sizes)
[navbar-height] = 6.25rem
[padding-horisontal] = 2.5rem
[logo-bottom-padding] = 2.5rem. It would be between logo and rest of the content
Calculate [spacer-height] = calc((100vw - 2 * padding-horisontal) * (logo-height-ratio / logo-width-ratio) + navbar-height + padding-horisontal)

Layout notes

General idea: the navbar is a 3 column grid. Where the big logo tooks 3 columns - so it naturally sits in the 2nd row.

The logo is a SVG embed element, it's inside the link block, and this block is inside another wrapper. This one highest level wrapper is animated: it changes width and y position.

Styles notes

.navbar - display grid 3 column 1 row, [navbar-height]

.brand_link-secondary.target-1 - display flex align center center, height 100%, move y -100px (same as [navbar-height]), attribute "target-1"

.navbar-logo - width 12.85rem

.logo_big-wrapper.target-2 - position column span 3, display flex align center top, width 10%, move y -65px (adjust for your logo), attribute "target-2"

.brand_link-big - width 100%

.big-logo - width 100%

.spacer-home - [spacer-height], attribute "trigger"

Set the final positions of the main logo (and secondary logo optional)

The start positions would be set in the GSAP panel

.brand_link-secondary.target-1 - move y -100px ‍

.logo_big-wrapper.target-2 - width 10%, move y -65px

Notes about GSAP interactions

As I decided to create the second page with gradient logo, I saw that it is better to use attributes.

AND important to set for interaction "Runs on" - check all pages where you need this animation.

You can see how interactions are built right on the panel. The key idea is to set animation From:

move Y 0px
width 100%

Note about SVG logo

In my layout it was important to delete width and height from the svg-code inside embed element.

‍

Gradient logo

It works as SVG-mask.

Styles notes

As there is no svg element, you'll need to set dimentions for wrapers. (And check through breakpoints)

.logo_big-wrapper.is-2 - ratio 32x10 (same as logo ratio)

.brand_link-big.logo-mask - height 100%, ratio 32x10 (same as logo ratio)

Notes about gradient and mask

Now SVG should be uploaded to assets, and you'll use its link in the embed code.

Now .brand_link-big is empty, and it has combo class .logo-mask - that is used in the embed code.

Near the .brand_link-big you can see embed element .gradient - inside there is code that set gradient and mask.

‍