Scaling a navbar and items on scroll

[NickWoodward]

Just after a bit of advice on my approach to scaling a navbar using scrollTrigger if anyone minds judging me

I'm scaling the navbar wrapper in the Y direction (so that it remains at 100% width), and the nav itself in the X direction by the same amount so it retains its aspect ratio... but I feel like there must be a better way of doing this? Just doesn't feel like a very elegant approach given what gsap can achieve. Not sure why, maybe I'm over thinking it!

 

gsap.timeline({
  scrollTrigger: {
    trigger: '.menu',
    start: '1px top',
    end: 'bottom bottom',
    toggleActions: 'restart none none reverse',
    // markers: true
  }
}).to('.menu', { scaleX: .7, transformOrigin: '0 0' }
).to('.menu-wrapper', { scaleY: .7, transformOrigin: '0 0' }, '<');

 

See the Pen ZEJRLNM by nwoodward (@nwoodward) on CodePen

[Cassie]

Hey Nick,

 

I don't see anything wrong with that at all, scale transforms will be more performant that animating height which is what most people do. 🤷🏼‍♀️

[NickWoodward]

1 minute ago, Cassie said:

Hey Nick,

 

I don't see anything wrong with that at all, scale transforms will be more performant that animating height which is what most people do. 🤷🏼‍♀️

Hi Cassie

Oh ok, yeah I just thought it was a bit clunky having the aspect ratio rely on the menu and its container, but glad to know it's ok. Thanks!

[Cassie]

You could always do...
 

gsap.timeline({
  scrollTrigger: {
    trigger: '.menu',
    start: '1px top',
    end: 'bottom bottom',
    toggleActions: 'restart none none reverse',
    // markers: true
  }
}).to('.menu', { scale: .7, transformOrigin: '0 0' }
).to('.menu-wrapper', { height: '50px', transformOrigin: '0 0' }, '<');

But height transforms aren't as smooth.

[NickWoodward]

That doesn't keep the aspect ratio of the menu items though does it? That's kind of what I was getting at - I guess I could position the menu absolutely and then scale that separately to the height of the wrapper?

*edit: Ah, yes it does, I'm being an idiot