Drawing white line on scroll reveal effect

[DaneWB]

Hi Sitepoint community,

I am looking to implement a design which was discussed here in 2018. My website which is a template created using square space.

I am very new to developing and am struggling understand where I inject the HTML & where I inject the CSS. I have tried a few different things which have been unsuccessful to say the least.

I am wondering if somebody could help me out. Below is the original post and design I am trying to implement into my webpage.

Draw line animation on scroll using transform: translate3d and JS

I’m trying to recreate this effect on the site I’m working on now. Here’s the site. [image] The one where it looks like it’s drawing a white line towards the next element when scrolling and would shorten when it has reached that element and the user still continues to scroll. I really have no idea what’s going on. All I know is that it does not actually draw a white line and it’s using transform: translate3d. I’m researching for a few days now but most search results include parallax and sv…

I appreciate any advice.

Best regards,

[Gandalf]

You won’t find many members here using SquareSpace, but you might find this article useful.

.

[DaneWB]

Thanks for your reply,

I saw a post very similar which I added the link to in my post. They are requesting it for squarespace also so Im just requesting a bit more detail on how I could implement it into a Squarespace template.

thanks

[TechnoBear]

That thread was quite a while ago, but @PaulOB might recall the details.

Have you tried to add it to your site, and if so, how did you do it and what was the result?

[PaulOB]

@DaneWB

I saw a post very similar which I added the link to

I was involved in that old thread but only on a Css/html js level.

I know nothing about implementing on square space as that will be down to your control panel or whatever it is you use there to add custom code.

If you have managed to add the custom code then if you can supply a link to the page in question we can tell you why it’s not working but it would be up to you to work out how to implement the code correctly into your system.