locomotivescroll + pin doesn't work

[SPR1NG9]

When I add pin to element background of scroll is visible

 

Here's my code:

gsap.registerPlugin(ScrollTrigger);


function gsapanim(){

const locoScroll = new LocomotiveScroll({
  el: document.querySelector(".scrollContainer"),
  smooth: true
}); 

// each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)

       locoScroll.on("scroll", ScrollTrigger.update);

// tell ScrollTrigger to use these proxy methods for the ".smooth-scroll" element since Locomotive Scroll is hijacking things
    ScrollTrigger.scrollerProxy(".scrollContainer", {
        scrollTop(value) {
          return arguments.length ? locoScroll.scrollTo(value, 0, 0) :    locoScroll.scroll.instance.scroll.y;
  }, // we don't have to define a scrollLeft because we're only scrolling vertically.
  getBoundingClientRect() {
    return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
  },
  // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
  pinType: document.querySelector(".scrollContainer").style.transform ? "transform" : "fixed"
});

    // TIMELINE 1

    const tl1 = gsap.timeline({scrollTrigger: {
      scroller: ".scrollContainer",
      trigger: '.header',
      start: "top top",
      end: "bottom 60%",
      scrub: 3,
      markers: false,
      id: 'header',
      pin: '.header',
      }
    });

    tl1.to('.top__logo', {
      scale: 4,
      opacity: 1,
      ease: "none"
    })

    const tlcs = gsap.timeline({scrollTrigger: {
      scroller: ".scrollContainer",
      trigger: '.header',
      start: "top top",
      end: "bottom 60%",
      scrub: 3,
      markers: false,
      pin: '.header',
      }
    });
    tlcs.to('.top__smoke-child', {
      x: "-200%",
      opacity: 0,
      ease: "none",
      id: "header2"
    })

    tl1.to('.top__logo', {scale: 5, opacity: 0, duration: 0.5});
    tl1.to('.header', {opacity: 0, duration: 0.1});
    tl1.to('.header', {display:"none", color: "black"});

    // TIMELINE 2
    
    const tl2 = gsap.timeline({scrollTrigger: {
      scroller: ".scrollContainer",
      trigger: ".section--main__ui_1",
      start: "-385px 28%",
      end: "999px 33%",
      markers: true,
      toggleActions: "restart none restart none",  
      id: "tl2"
      }
    });

  tl2.fromTo('.main__top_1', {opacity: 0}, {opacity: 1, duration: 1, delay: 1})
  tl2.fromTo('.main__description_1', {opacity: 0}, {opacity: 1, duration: 1})


  const tl3 = gsap.timeline({scrollTrigger: {
    scroller: ".scrollContainer",
    trigger: ".section--main__ui_2",
    start: "-385px 28%",
    end: "999px 33%",
    markers: true,
    toggleActions: "play restart restart none", 
    id: "tl3",
  }
});

tl3.fromTo('.main__top_2', {opacity: 0}, {opacity: 1, duration: 1, delay: 1})
tl3.fromTo('.main__description_2', {opacity: 0}, {opacity: 1, duration: 1})

// each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. 
ScrollTrigger.addEventListener("refresh", () => locoScroll.update());

// after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
ScrollTrigger.refresh();

P.S: My container is also called "scrollContainer"

See the Pen 1dc38ca14811bc76e25c4b8c686b653d by GreenSock (@GreenSock) on CodePen

[akapowl]

 

Hey @SPR1NG9 - welcome to the forums.

 

Providing a minimal demo always helps better understand what your issue is or could be.

It can always stem from several sources such as the HTML-markup or CSS, so solely looking at your code can only force guesses on what might be the issue.

 

Judging from the JS you posted, I noticed that you have two ScrollTriggers there trying to pin the same element at the same time - that alone could be a cause of problems. Also quite recently there have been some questions from users using locomotive-scroll's data-attributes and having problems with pinning.

 

I adressed some of the issues with that in these threads, noting that due to the way those data-attributes make the smooth-scrolling of loco work, it just wouldn't work properly with ScrollTrigger's pinning - are you using these ( data-scroll-section)? If so, these threads might be worth taking a look at:

 

 

 

 

If this isn't the case for you, a minimal demo of your setup / issue really would help in getting to the bottom of your problem.

 

Cheers,

Paul

 

[Shehzad Asif]

Hi @SPR1NG9 

 

Here are few things to be noted.

 

1- Explain your issue clearly so it is understandable and provide a minimal demo as paul suggested.

2- Your code looks a bit messy to me. I don't understand why you are using "tl1"  again after "tlcs" while it should be at one place or you can make another timeline to do the same.

3- If you are using your timeline with "scrolltrigger" then you should use following syntax to make it work correctly.

Always pause your animation or it will be played on page load.

Always mention animation or timeline name as mentioned below.

 

const tl1 = gsap.timeline({
  paused: true, // so it will be paused initially and will trigger on trigger, otherwise it will trigger on load
  scrollTrigger: {
    animation: tl1, // name of timeline is important to trigger the relative animation
    scroller: ".scrollContainer",
    trigger: '.header',
    start: "top top",
    end: "bottom 60%",
    scrub: 3,
    markers: false,
    id: 'header',
    pin: '.header',
  }
});

tl1.to('.top__logo', {
  scale: 4,
  opacity: 1,
  ease: "none"
})
// paste other tl1 animations here to make to your code clear and efficient

 

I think it will solve your issue if it does not, provide a demo to help us better understand your issue.

 

Happy coding

 

[SPR1NG9]

Thanks, @akapowl

There are two examples
1) 

See the Pen ExgGjyQ by spr1ng9er (@spr1ng9er) on CodePen

 

2) 

See the Pen 1dc38ca14811bc76e25c4b8c686b653d by GreenSock (@GreenSock) on CodePen

 

In the first example, there is no background for the scroll bar, but the second example has it, why?

I'm talking about this part (from the second example)

btw if i remove all pin from the second example will work fine and it won't have the background of scrollbar

[akapowl]

 

I don't think I understand.

Wasn't your problem, that the pinning is not working?

In both of these examples the pinning works just fine.

I'm confused ?

 

 

These threads discuss how to prevent the browser-scrollbar from showin when using locomotive-scroll:

 

 

 

[Kahndryl]

Hi all !

 

I'm using Locomotive Scroll and ScrollTrigger on a project. And I also have a problem using it.

 

All my pages are composed of "section" with data-scroll-section on each. When I want to set the scrollTrigger to scroll a slider, the area becomes white (indeed I end up at the top of the page with an opacity of 0).

 

Here is a codepen example inspired by the @SPR1NG9 example :

 

See the Pen wvebBeW by ID-Clic (@ID-Clic) on CodePen

 

 

Thanks for your time !

[akapowl]

Hello @Kahndryl

 

For things to work with locomotive-scroll, ScrollTrigger's .scrollerProxy() relies on the movement of the whole container element.

 

As mentioned before, ScrollTriggers pinning will simply just not work with locomotive-scroll's data-scroll-section attribute, as locomotive-scroll will inevitabley tell those elements you are tying to pin to keep on moving/translating and there's nothing ScrollTrigger can do about that so there will be conflicts all over the place.

[Kahndryl]

Hi Akapowal,

 

Thank you for your reply. Ok I'll remove all data-scroll-section.

 

Have a good day !

 

Regards