Multiple sidebar sticky problem with scroll smoother

[Mahabub Hossain]

Hello Experts,

I'm new with Gsap. I'm facing a problem that I can't solving. I'm working on a frontend project with html, sass, bootstrap and jQuery. For animation, I'm using Gsap. I've a section, where it has three unequal columns. Now I want to position them sticky. If I remove scroll smoother plugin, then sticky working perfectly. But If I add scroll smoother, then it's not working. In that case,, how can I use both scroll smoother and also position them sticky.

 

This is my current codes which has so many problems,, it's overlapping the bottom section

```

 

    if (device_width >= 1200) {

      if ($(".banner").length > 0) {

        const metaElement = document.querySelector(".banner__meta");

        const sidebarElement = document.querySelector(".banner__sidebar");

        gsap.to(metaElement, {

          scrollTrigger: {

            trigger: metaElement,

            start: "top-=160px top",

            endTrigger: ".banner",

            end: "bottom bottom",

            pin: true,

            pinSpacing: false,

            markers: false,

          },

        });

 

        gsap.to(sidebarElement, {

          scrollTrigger: {

            trigger: sidebarElement,

            start: "top top",

            endTrigger: ".banner",

            end: "bottom bottom",

            pin: true,

            pinSpacing: false,

            markers: false,

          },

        });

      }

    }

```

where .banner is parent and .banner__meta, .banner__content and .banner__sidebar are the uneual columns,, I want to position them such a way that normally css do.

 

I'll be thankful If anyone help me about this.

Thanks in advance.

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Mahabub Hossain]

See the Pen WNYPawo by Mahabub-Hossain-the-selector (@Mahabub-Hossain-the-selector) on CodePen

 

sorry,, I'm a newbie.. please take this example and sticky the columns as normal css do with smooth scroll. Thank you

 

[mvaneijgen]

Hi @Mahabub Hossain welcome to the forum!

 

Except for not loading the GSAP, ScrollTrigger, ScrollSmoother and jQuery and not having any code that seems to do with scrollsmoother in your demo, your code seems to work fine. 

 

I've loaded all the necessary plugins in your demo, add the ScrollSmoother code and wrapped your content in the necessary divs with classes see the docs  which made it work. 

 

What exactly do you have trouble with? GSAP and ScrollTrigger are free to use 💚, but keep in mind that ScrollSmoother is a Club Greensock Member plugin and works only in your local project or on sites like Codepen and StackBlitz, so if you want to use the tool on your live website you'll have to pay for a license.

 

Hope it helps and happy tweening! 

 

 

See the Pen abQXRMr?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Mahabub Hossain]

Many many thanks for your helpful answer. I got it. Please take a look,,I updated the codepen demo.

See the Pen jOQdeeY by Mahabub-Hossain-the-selector (@Mahabub-Hossain-the-selector) on CodePen

 

The problem is,,when .banner section ends scrolling, still the sidebar sticking and overlaping to the next sections. How can I fix this?

Hope you'll get my question?

Thank you

 

[Mahabub Hossain]

Many many thanks for your helpful answer. I got it. Please take a look,,I updated the codepen demo.

See the Pen jOQdeeY by Mahabub-Hossain-the-selector (@Mahabub-Hossain-the-selector) on CodePen

 

The problem is,,when .banner section ends scrolling, still the sidebar sticking and overlaping to the next sections. How can I fix this?

Hope you'll get my question?

Thank you

 

[mvaneijgen]

No, sorry I don't get what you mean. What is "next section" in your opinion? There is nothing more after Lead Architecture... should there be more? 

 

Usually we ask for a minimal demo which means, just some coloured divs, right now you have 400 lines of HTML and 600 lines of CSS, which makes debugging this a lot harder. If you could just create this with four boxes without all the content it would be much easier to understand. Eg Sidebar yellow box, middle red box, other sidebar blue box and a pink next section box. 

[Mahabub Hossain]

Many many thanks for supporting me.

here is the codepen demo,,please take a look

 

See the Pen QWJYRgv by Mahabub-Hossain-the-selector (@Mahabub-Hossain-the-selector) on CodePen

 

 

 In my page I've a section where I've three unequal columns,,,I want to make them sticky like normally css do. But the problem is If I use scroll smoother than sticky position not working. That's why I decided to make them sticky with gsap itself. But with gsap I can't achieve the same thing. How can I make them sticky like normal css do? Hoping this time it's clear to you.

Thanks in advance

[Rodrigo]

Hi,

 

The problem here are the heights of the elements you want to pin. All the three columns you have there have different heights and the trigger and end trigger elements are different so that messes the calculations. Also your ScrollSmoother config is not the correct one.

 

Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!

[Mahabub Hossain]

Many many thanks, You're awesome. This is exactly what I'm looking for. Have a great day!

[Mahabub Hossain]

Hi buddy,

can you help me a little more. I update the codepen demo, please take a look.

See the Pen rNQPXgz by Mahabub-Hossain-the-selector (@Mahabub-Hossain-the-selector) on CodePen

 

In here, I added  padding to the this class="banner". Because of it's our trigger element, now it's behaving little bit differently,,,If I scroll to the bottom of the section my sticky elements are overlap to the next section. How can I take control of it?  In large device I've 200px padding,,in small device it'll maybe 100px or something else,,whatever it is,,please do something that it works everywhere nicely.

 

Thanks 

[Rodrigo]

Hi,

 

Just add the top and bottom padding to the end point. If you are using different values you can use a conditional check:

const extraPadding = window.innerWidth > 1024 ? 400 : 200;

ScrollTrigger.create({
  trigger: ".banner",
  start: "top top",
  end: () => "bottom top+=" + (metaElement.clientHeight + extraPadding),
  pin: metaElement,
  pinSpacing: false,
  id: "l",
  markers: true
});

ScrollTrigger.create({
  trigger: ".banner",
  start: "top top",
  end: "bottom top+=" + (sidebarElement.clientHeight + extraPadding),
  pin: sidebarElement,
  pinSpacing: false,
  id: "r",
  markers: { indent: 200 }
});

Although a better option would be GSAP MatchMedia:

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

Hopefully this helps.

Happy Tweening!

[Mahabub Hossain]

Many many thanks for your solution. This is exactly what I'm looking for. Have a great day!