Jump to content
Search Community

Using Gsap fixed header demo and scroll content

sscash test
Moderator Tag

Recommended Posts

I was searching on Google and your forum to solve this issue, but nothing. I had to write you brilliant minds here.

 

1. This your demo https://codepen.io/GreenSock/pen/mdVyPvK

2. I just need it to work with scroll content. "Scroller"

 

This is the code to make the site have that smooth and disappearing scroll bar.

	gsap.registerPlugin(ScrollTrigger);
	let bodyScrollBar = Scrollbar.init(document.body, {
	  damping: 0.1,
	  delegateTo: document,
	});
	ScrollTrigger.scrollerProxy(".scroller", {
	  scrollTop(value) {
		if (arguments.length) {
		  bodyScrollBar.scrollTop = value;
		}
		return bodyScrollBar.scrollTop;
	  },
	});
	bodyScrollBar.addListener(ScrollTrigger.update);

But I can't have both 

1 https://codepen.io/GreenSock/pen/mdVyPvK

2. Scroller works together. 

 

Any solution will be highly appreciated. 

See the Pen mdVyPvK by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

 

Hey there @sscash - welcome to the GSAP forums.

 

34 minutes ago, sscash said:

This is the code to make the site have that smooth and disappearing scroll bar.

 

It actually isn't the code for the smooth-scrollbar.

 

This is:

 

https://unpkg.com/smooth-scrollbar@8.6.2/dist/smooth-scrollbar.js

 

 

 

The first part of the code-snippet you posted is the initialization of that plugin and the second is the .scrollerProxy, which is so to say the middleman between that smooth-scrollbar and ScrollTrigger.

 

Since that smooth-scrollbar is a third-party plugin and not related to GSAP at all, it is not supported in these forums.

 

If you want to get started with that plugin but don't have any experience with it so far, I would recommend checking out their website first.

 

https://idiotwu.github.io/smooth-scrollbar/

 

After that you could dig deeper and check the general documentation on their Github page, that also contains a link to their advanced API documentation.

 

 

You sure can have both, ScrollTrigger AND that smooth-scrollbar.

If after the implementation you still have problems hooking it up to ScrollTrigger, we'll be happy to help.

 

 

  • Like 1
Link to comment
Share on other sites

 

There is a ScrollTrigger-native helper function that you can utililze for smooth-scrolling.

You can find it it the documentation for the .scrollerProxy() (the last demo on that page).

 

Just FYI, it contains a workaround for v3.6.1 with regard to ScrollTrigger's snapping, that might be removed later on.

More about that in this thread here

 

 

 

 

  • Like 1
Link to comment
Share on other sites

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
  • Recently Browsing   0 members

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