Navbar ScrollTrigger + svg path animation

[fernandocomet]

I am trying to achieve the following:

Once the User starts scrolling, the Navbar collapses to a maximum height of 48px as much. 

Also some letters get opacity 0 unless there is an hover

 

Problem I see is that in low resolutions it is scaling more. 

 

Probably there is a better approach for this

Any help is welcome

See the Pen EaxxKJV by fernandocomet (@fernandocomet) on CodePen.

Edited February 11 by fernandocomet
Simpler Codepen

[mvaneijgen]

I'm not sure what the issue is I'm looking for, can you maybe describe what you're seeing and what, something like: 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 

I do however see a few issues with your setup. You're creating your own ScrollTrigger controls, but all this you get for free with less setup if you use a timeline in combination with a ScrollTrigger. I've restructured your pen a bit how I would set it up and I’ve placed some comments in your JS to better explain things, please be sure to read through them!

 

If you want an element to start out somewhere, but then animate to some other place and you're not sure what the starting or end values are I would take a look at our Flip plugin, with it you can create two states of an element and then have the Flip plugin calculate all the values for you:  https://gsap.com/docs/v3/Plugins/Flip/  might be worth checking out!

 

Hope it helps and happy tweening! 

 

See the Pen ZYEEOJQ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[fernandocomet]

Looks good, thank you very much

The only thing I notice is what happens onResize. The height of the Navbar is not changing

So for example if I have a little Menu, Navbar height does not change on resizing

See the Pen PwoobrR by fernandocomet (@fernandocomet) on CodePen.

 

[Rodrigo]

Hi,

 

If I'm understanding this correctly maybe something like this:

See the Pen XJWmYNz by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!