ScrollTrigger pin feature issue

[Laxren]

Hello,

I have issue with pin feature.

Everything looks fine until you get to the bottom of the page and then change tab in browser or refresh it. Then the pinned element become fixed even if he shouldn't.

I don't know if it is my bad or I forgot something or..

See the Pen bGEwdVX by laxren (@laxren) on CodePen

[ThisIsCrowd]

I'm having the same problem. Using `ScrollTrigger.refresh()` or `ScrollTrigger.update()` alongside the Page Visibility API doesn't help

[_Greg _]

Have same problem

[GreenSock]

Sorry about that! Yes, there was a bug that'd cause a pin to get re-implemented if you're scrolled ALL the way down on the page and do something that causes a refresh() (like switch back to the tab, resize, etc.). It should be resolved in the next release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js

 

Does that work well for you? 

[_Greg _]

That demo doesn't work on 3.3.3 version. Its will be fixed on 3.3.4?

[ZachSaucier]

11 minutes ago, Nekiy2 said:

That demo doesn't work on 3.3.3 version. Its will be fixed on 3.3.4?

Yep. Use the beta file for now.

[_Greg _]

Thank you! On version 3.3.4 all working good!

[Laxren]

Yes, it works well now. Thank you. 🤍

[MTM]

I've been having the same issue with one of my components and was looking forward for the fix.

However, with Webpack 4 and latest gsap 3.4.4 release installed, when I set ScrollTrigger.config({ limitCallbacks: true }); it throws a console error:

Uncaught (in promise) TypeError: gsap_ScrollTrigger__WEBPACK_IMPORTED_MODULE_3__.ScrollTrigger.config is not a function

This is an overview of my implementation:

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);
gsap.core.globals("ScrollTrigger", ScrollTrigger);

const SITE_HEADER_HEIGHT = document.querySelector(".js-site-header")
  .offsetHeight;

export default class StackRevealer {
  constructor(el) {
    this.DOM = {};
    this.DOM.el = el;
    this.DOM.navigation = this.DOM.el.querySelector(
      ".js-stack-revealer-trigger"
    );
    this.DOM.content = this.DOM.el.querySelector(".js-stack-revealer-content");
    this.DOM.headerLinks = Array.from(
      this.DOM.el.querySelectorAll(".js-stack-revealer-header-link")
    );
    this.DOM.items = Array.from(
      this.DOM.el.querySelectorAll(".js-stack-revealer-item")
    );

    this.pinLinks();
  }

  pinLinks() {
    const triggersBottomPosition =
      this.DOM.navigation.offsetHeight + SITE_HEADER_HEIGHT;

    ScrollTrigger.config({ limitCallbacks: true });

    ScrollTrigger.create({
      aniticipatePin: 2,
      trigger: this.DOM.content,
      id: "stack-revealer-pinned-links",
      start: () => "top " + SITE_HEADER_HEIGHT,
      end: () => "bottom " + triggersBottomPosition,
      pin: this.DOM.navigation,
      scrub: true
    });
  }
}

I have also tried to set ScrollTrigger.config({...}) right after gsap.registerPlugin(...) but with no success...same error.

Is this an issue with ScrollTrigger.config() when using Webpack or am I missing something?

[ZachSaucier]

3 hours ago, Cos said:

Is this an issue with ScrollTrigger.config() when using Webpack or am I missing something?

It seems like the previous GSAP was not properly removed/the new version not properly added. I recommend completely removing the /gsap directory from your npm-modules and reinstalling.

[MTM]

@ZachSaucier That seems to have been the issue, indeed. Although I ran rm -rf node_modules yarn.lock before installing v3.4.4 a few times, it turned out that I need to run yarn cache clean to properly pick up the latest version.

 

Thank you!