ScrollTrigger.js：未捕获（承诺中）TypeError：无法读取未定义的属性（读取“pin”）GreenSock，GSAP

Question

我继承了一个没有文档的项目，当离开某个页面然后返回该页面时，在 Web 控制台中不断收到错误

ScrollTrigger.js: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'pin')

。如何在各种 JavaScript 组件中将

pin

定义为 true 或 false 或其他内容？这是用 Pug JS 构建的。也出现这个错误

Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'curTrigger.pin')

有些组件有这个：

this.magicPin();

magicPin() {
        ScrollTrigger.matchMedia({
            '(min-width:768px)': () => {
                ScrollTrigger.create({
                    trigger: this.items,
                    start: 'center center',
                    end: () => (80 * this.item.length * 2) + '%',
                    pin: true,
                });
            }
        });
    }

有些没有定义 magicPin 或 ScrollTrigger：

import {Component} from 'bona';
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
import {magicSlideElementAppear} from '../lib/transitions';

export default class Billboard extends Component {
    constructor() {
        super(...arguments);

        this.header = this.el.querySelector('.billboard-header');
        this.text = this.el.querySelector('.billboard-text');
        this.action = this.el.querySelector('.billboard-action');
    }

    async onInit() {
        await document.fonts.ready;

        this.magicShow();
    }

    magicShow() {
        if (this.header) magicSlideElementAppear(this.header);
        if (this.text) magicSlideElementAppear(this.text);
        if (this.action) magicSlideElementAppear(this.action);
    }
}

我只是想知道如何在没有或需要它的组件中定义它。

Answer 1

magicPin

不需要

await

，但是需要在

async

函数中添加它，并且添加一个窗口宽度条件。

if (window.innerWidth >= 768) {
  await this.loadLottie();
  this.magicPin();
  this.magicScroll();
}