I've seen that but I wasn't quite sure how to render it based iff that

it's pretty simple, You use the hook and add the ref to the element, that you want to track (yellow box). Then the inView variable (red box) changes itself to true or false, wether the element with the ref is visible or invisible

But from that how do I make it render

my website is a one page website and it constantly says true even if it isn't in view height

the viewport is only the visible view of the browser. So even when you site is a onepager, the elements are not everytime in your viewport. And this package looks at the viewport

you can just use conditional rendering for it. For example like this:

   {inView && <div ref={ref}>
      <h2>{`Header inside viewport ${inView}.`}</h2>
    </div>}

that doesn't seem to work

Do you mind if I send you my code?

The website is a one page website and it says it is in view even when it isn't

Even if it is out of view it still says that it is inview

the inview property returns true everytime even if it isn't

yea, create a https://codesandbox.io/ from your repo. Or https://jsfiddle.net/

I haven't uploaded it to github, is there any other way that I can share it to you?

actually never mind

ill upload it now

Nvm ignore that it didn't work for some reason

is there any other way I can get you the code

yes, you can use this page https://codesandbox.io/ to only share the relevant content (copy paste it, when it's not on github). Like that, I will create you a working example, that you can apply for your project 👍

Hey heres the link

Sorry the link is so long for some reason

I also removed the package you told me to install so you have a fresh start

also basically I want the template animation to start when I scroll down and it is within my view height

you will under stand more when you actually see the link

and also thanks for any help in advance

good job. I can't open the link for some reason. You used the share link? That should normaly also way shorter ^^ (see screenshot)

Yeah I clicked share link let me try again

Hey idk what else to do so I just made a invite link

Yeah I tried to make the other link but it didn't work just try joining the team through the link I sent

Hey also when you check out the code can you ping me ?

yes, I am now in BDW*. There are no projects listed. Maybe the repo is inside your drafts. The drafts are private to you, but you can move the repo in any folder to share it with BDW*. Ping me, whenever you done that 🙂

@B33fb0n3 hey I didn't realise that I made a repository on code sandbox

But here's the code hopefully iy works now

that worked now. Goob job! 👍
I couldn't find this part: https://nextjs-forum.com/post/1236628699508379708#message-1236685201158045858
Am I blind or is it not inside your project yet?

Hey are all the correct files there ??

Or is it just rhe default ones

If it's just the default ones I think I might know why

the codesandbox code looks different to the github repo. Try to edit the codesandbox code

Yeah I just pushed everything

I think it should all be updated

Bit to explain my issue more I want the template component to render when I scroll down to it

So the animation I have set for it plays then

yes, it's updated now, but the project itself does not contain the npm package..

Ohh okay I'll install it

@B33fb0n3 This is the new link

let me know how it goes and if it works or not

also sorry for the late reply

Also if you don't mind can you ping me when you attempt it

Also thanks for the help in advance

Thanks! I couldn't find where you integrated this: https://nextjs-forum.com/post/1236628699508379708#message-1236685201158045858
Can you help me?

Hey so do you see the file that says Templates.js

or something along that

I want that component

yea

you could say to be rendered when you scroll down to there

found it. But your try how to implement it. Where is it?

the templates is the image slider on the actual page btw

I tried to implement it but deleted because I thought it would be easier for you to help me

if you want

i can send you the code that has the implementation

as i still have it on my local machine

sorry if thats a problem

?

yea, please add it to the codesandbox 👍

Okay

@B33fb0n3 Hey really sorry for the late response

I just updated the code

let me know how it goes

It seems like the codesandbox isn't updated yet. Can you update the codesandbox please?

Huh okay wierd

let me fix it

@B33fb0n3 He sorry to bother you but I updated it please let me know if it worked for you!

seems to work fine. I pushed it to the repo

Wait what did you push I cant seem to see it

unless im not looking correctly

nvm 🤔

Wait what happened

linked the wrong one. This is the right one: https://codesandbox.io/p/github/BDWNAV/project/csb-6ymvcv/draft/withered-microservice

take a look where my mouse it. And look also on the right. You can see, that it is right now "not visible"

Yeah if I scroll down it says not visible

yes. And that's correct. Because it's not visible xD

Ohh but how do i get the actual component to show when I scroll down to t hat level if that makes sense

look what I am doing..

okay looking

Hey does it say true for you even thought it isn't displayed on the screen

In the version right now it only renderes when it's visible. You can see that here:

You header was to small, so it rendered everytime directly

Ohhhh

so did you just increase the size of th e header

if so what size did you increase it too

because I had the header set at 100vh is that too little

you can see it inside the files. I set it to 200vh now

but is there any way to maintain similar height because for the layout I was attempting to achieve I was hoping I could keep the header all in the screen at the same time if that makes sense

yes you can set the header to make it all the height of the screen and set your galerie a little later, so it does not trigger instantly

I see how would I go about doing that because I thought 100vh

makes it the full height of the screen

It seems that 100vh makes it say true

but 101vh doesnt

would that be a efficient swap

or a efficient way to go about it

it's a possbile solution to make it heigher than 100vh. You can also think about placing the element 1vh down and keep 100vh for the header. Another thing you can consider is the threshold from useInView

Ah okay I'll have a look at the docs to learn more about it

Ahh i see what you mean by the thrshold, btw thanks so much for your help I really appriciate it

happy to help. Please mark solution: https://nextjs-forum.com/post/1236628699508379708#message-1236658888841891903