Jump to content
Search Community

I NEED to create a scrolling line. URGENTLY! #134406

whalefr

By whalefr
in GSAP

 Share

Recommended Posts

whalefr

whalefr

Posted
Posted

Hey Everybody, i need to create a scrolling line which goes to the bottom when we're scrolling down on a website on gohighlevel.

 

I need help with coding of it.

 

An example of it is in this website (you might need to scroll down)(screenshot attached)
https://lp.digital-launchpad.com/

Screenshot 2024-08-02 at 13.10.48.png

Cassie

Cassie

Posted
Posted

You'll need to look into ScrollTrigger and (maybe) DrawSVG - Although as it's just a straight line you could use a mask or a transform.

Here's a demo to get you started

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

whalefr

whalefr

Posted
  • Author
Posted
34 minutes ago, Cassie said:

You'll need to look into ScrollTrigger and (maybe) DrawSVG - Although as it's just a straight line you could use a mask or a transform.

Here's a demo to get you started
 

 

Hey @Cassie, thank you so much for replying.

 

Unfortunately I'm not really experienced in coding and however i've been trying to do this for hours on top of hours, creating codes with gemini and chatgpt, asking communities, talking with support I'm still unable to do this.

 

Do you have an easier explanation that i could follow?

Cassie

Cassie

Posted
Posted

Heya,


So it's often way more helpful to read the docs than ask AI. They just make up nonsense a lot of the time and you don't actually learn anything.

 

Here's our getting started guide that explains tweens and timelines

https://gsap.com/resources/get-started

 

Here are the docs for scrolltrigger

https://gsap.com/docs/v3/Plugins/ScrollTrigger

 

And here's a very simplified example using transforms

See the Pen YzoVKxo?editors=0110 by GreenSock (@GreenSock) on CodePen.

  • Like 1
whalefr

whalefr

Posted
  • Author
Posted
1 hour ago, Cassie said:

Heya,


So it's often way more helpful to read the docs than ask AI. They just make up nonsense a lot of the time and you don't actually learn anything.

 

Here's our getting started guide that explains tweens and timelines

https://gsap.com/resources/get-started

 

Here are the docs for scrolltrigger

https://gsap.com/docs/v3/Plugins/ScrollTrigger

 

And here's a very simplified example using transforms

 

Thank you @Cassie! This is literally what i want. Maybe a bit different.

 

But I'm confused on one thing. I'm confused on where to put the JS, CSS and HTML code to.

 

I will show you in this video where I've put them. (It didn't work)
https://www.loom.com/share/c96a65a816094506971d308775bdbc64?sid=4c98dc79-bdb9-4826-89ed-7c805f14378e

Let me know where should i put them and how please Cassie! Thank you for your help I really appreciate it!

 

Cassie

Cassie

Posted
Posted

Oh I'm sorry, I don't think I can help you with that. This example is *very simplifed*.

You won't be able to just drop it in. In order to integrate it into your site you're going to have to pay attention to how the other elements on the page are styled, load in the appropriate GSAP files and a lot of other things that I can't help with from just seeing a little video of your website GUI. I'm also entirely unfamiliar with the tool you're using here. 

I'm not sure what GUI you're using, but maybe reach out to their support staff and see if they can help you.

Apologies

whalefr

whalefr

Posted
  • Author
Posted

Unfortunately their support couldn't help me.

 

Also here's a code I've used, i believe it is Javascript or HTML.

 

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      overflow-x: hidden; /* Prevent horizontal scroll */
    }
    #scroll-line-left,
    #scroll-line-right {
      position: fixed;
      top: 0;
      width: 5px;
      background: linear-gradient(to bottom, #ffe09f, #feba11);
    }
    #scroll-line-left {
      left: 0;
    }
    #scroll-line-right {
      right: 0;
    }
  </style>
</head>
<body>
  <div id="scroll-line-left"></div>
  <div id="scroll-line-right"></div>


  <script>
    document.addEventListener('scroll', function() {
      const scrollLineLeft = document.getElementById('scroll-line-left');
      const scrollLineRight = document.getElementById('scroll-line-right');
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      const viewportHeight = window.innerHeight;
      const documentHeight = document.documentElement.scrollHeight;   


      // Calculate the height of the lines based on scroll position
      const maxScrollTop = documentHeight - viewportHeight;
      const scrollPercent = Math.min(scrollTop / maxScrollTop, 1);
      let lineHeight = viewportHeight * scrollPercent;

      // Ensure lineHeight doesn't exceed viewport height
      lineHeight = Math.min(lineHeight, viewportHeight);

      // Update the height of the lines
      scrollLineLeft.style.height = lineHeight + 'px';
      scrollLineRight.style.height = lineHeight + 'px';
    });
  </script>
</body>
</html>


It essentially creates 2 gradient lines both on the left and the right sides of the screen, maybe i can do something by modifying this or maybe you can get a better understanding? @Cassie

Cassie

Cassie

Posted
Posted

That code is an entire webpage, comprised of HTML, CSS and JS.

If I were you I would first try to JUST start by working out how to add some lines into your page with HTML and CSS

HTML is just the building blocks

CSS is for styling

JS is for interaction

Once you've got some lines you're happy with, pop back here and I can try to help you to animate them. I'm afraid this is all I can help with, there's an understanding/knowledge gap here that we don't really have the resources to bridge in these free forums.


Good luck - I'm sorry I can't be more help

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...