Laxren Posted June 15, 2020 Share Posted June 15, 2020 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 2 Link to comment Share on other sites More sharing options...
ThisIsCrowd Posted June 17, 2020 Share Posted June 17, 2020 I'm having the same problem. Using `ScrollTrigger.refresh()` or `ScrollTrigger.update()` alongside the Page Visibility API doesn't help Link to comment Share on other sites More sharing options...
_Greg _ Posted June 17, 2020 Share Posted June 17, 2020 Have same problem Link to comment Share on other sites More sharing options...
GreenSock Posted June 17, 2020 Share Posted June 17, 2020 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? 1 1 Link to comment Share on other sites More sharing options...
_Greg _ Posted June 17, 2020 Share Posted June 17, 2020 That demo doesn't work on 3.3.3 version. Its will be fixed on 3.3.4? Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 17, 2020 Share Posted June 17, 2020 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. Link to comment Share on other sites More sharing options...
_Greg _ Posted June 18, 2020 Share Posted June 18, 2020 Thank you! On version 3.3.4 all working good! 1 Link to comment Share on other sites More sharing options...
Laxren Posted June 18, 2020 Author Share Posted June 18, 2020 Yes, it works well now. Thank you. 🤍 1 Link to comment Share on other sites More sharing options...
MTM Posted June 22, 2020 Share Posted June 22, 2020 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 22, 2020 Share Posted June 22, 2020 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. Link to comment Share on other sites More sharing options...
MTM Posted June 22, 2020 Share Posted June 22, 2020 @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! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now