Dynamic startvalue for ScrollTrigger

[niklasinla]

Hi!
I'm trying to have dynamic value as a startvalue for the the scroll.

I've tried the code below and that's not working...

        let header = document.getElementById("header");
        let headh = header.getBoundingClientRect();
        let headheight = headh.height;            
            
        gsap.to("#header", {
            scrollTrigger: {
                trigger: "#aboutus",
                start: "top headheight",
                end: "top bottom",
                toggleActions: "play none reverse none",
                markers: true
            },
            backgroundColor: "#FFFFFF",
            duration: 0.1
        });

So I need to have the start value of the scroller to be the height of the header but the header will change it's height depending on the screensize.

When I looked at the tutorial-video for ScrollTrigger I found out about this way of doing it:

() => "+=" + document.querySelector("header").offsetHeight But how do I combine this with having the "trigger" still set to be triggered at the "top"?
I can't figure that one out...

Best, Niklas

[mikel]

Hey @niklasinla,

 

Whatever your setup, how about this version?

 

See the Pen 377761b1a0cbb02f37844ba58386a98a by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

 

[ZachSaucier]

Maybe you're looking for something like this?

start: `top +=${headheight}`,

It'd be helpful if you made a minimal demo.

[niklasinla]

Hi!
Thanks for the suggestions!!
Hmm...neither of them are working for me.
I've made a demo on Codepen.
Now I've set a fixed startvalue in pixels for the scroller - the same value as the height of the header.
That works exactly the way I want which is that the header has a transparent background and then the background-color animates in when the header "catches up" with the content.

But as described earlier I would like the startvalue to be dynamic....

See the Pen ExyeRvo by WideCircle (@WideCircle) on CodePen

[akapowl]

@niklasinla

 

What about this way?

 

start: () => "top " + header.offsetHeight

 

 

See the Pen cccaefeaeff7dd3ad101c3e06019b5f7 by akapowl (@akapowl) on CodePen

 

 

Edit:

Sorry, had to make some changes, to make it responsive on resize.

 

[niklasinla]

Ah - nice!
Thank you!! @akapowl 👍😊
That is working nicely!!!