Hello I am expecting to make a fixed header navigation which will be fixed to top on scroll and if scroll more then the navigation header bar should be scaled

[vinayskolkare]

Hi,  i am expecting as per the below image using scroll trigger also i have given my code pen .. any advise would be great

 

See the Pen GReYbNz by popjrluq-the-selector (@popjrluq-the-selector) on CodePen

[Toso]

after spending some time trying to make it work I found that you forgot to add the gsap and ScrollTrigger 😂and found some issues in your demo so I created a small demo with the animation you need  🫡

 

See the Pen OJqBKRX by ahmed-attia (@ahmed-attia) on CodePen

 

 

 

 

 

 

[vinayskolkare]

Thankyou somuch for the help!!

 

But Still i did not get as i am expected , what i need is on the first scroll the header should be fixed at the top 0, and second scroll it should be scaled to fill i have modified the absolute position to fixed but it wont working

 

See the Pen OJqBKRX by ahmed-attia (@ahmed-attia) on CodePen

[mvaneijgen]

When working with ScrollTrigger it is best to let ScrollTrigger handle all the pinning, so you're better of leaving position: fixed out of your CSS this wil ScrollTrigger inject in to the page when you need it. 

 

I've modified @Toso pen a bit to remove and set scrub: false and included the toggleActions, with this you can tell ScrollTrigger what to do with the animation when certain triggers are met https://gsap.com/docs/v3/Plugins/ScrollTrigger/ check out the docs for a full explanation. So if you scroll now the green makers will touch and it will make the header fixed (eg pin: true) and 1 second later it will grow the header. In ScrollTrigger land there is no watch for second scroll, it just play your animations of the triggers are met, so you could build two ScrollTriggers one for pinning and the other for the scaling, but that makes everything much more complex, so when starting out I would start simple and slowly build things out when you understand how to the tool work. Hope it helps and happy tweening! 

 

See the Pen MWxPNdZ?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

 

[vinayskolkare]

Thanks a  lot!  Thankyou so much for the showing a better example 

[vinayskolkare]

Hi,

 

How can i inject scroll trigger to the page whenever i need it, in the below pen its is working fine but can it be possible without using delay? what iam looking is the header needs to be expand only on second scroll i have been modified the code slightly please look into it and do need full

 

See the Pen MWxPNdZ by mvaneijgen (@mvaneijgen) on CodePen

[mvaneijgen]

It seems like you don't have updated the pen, you're linking my pen. 

 

As I said before, you can use two ScrollTriggers and have the second ScrollTrigger start later which grows the animation . Again there is no watch for second scroll. You could look in to the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ to really watch for scroll events, but this makes things loads more complex and when starting out I would start simple and slowly build our the tools you use to get a better understanding how things works.

 

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