I inherited a project with no documentation and keep getting the error ScrollTrigger.js: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'pin')
in the web console when going away from a page and then back to it. How do I define pin
as true or false or something in the various JavaScript components? This is built in Pug JS. Also getting this error Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'curTrigger.pin')
Some components have this:
this.magicPin();
magicPin() {
ScrollTrigger.matchMedia({
'(min-width:768px)': () => {
ScrollTrigger.create({
trigger: this.items,
start: 'center center',
end: () => (80 * this.item.length * 2) + '%',
pin: true,
});
}
});
}
And some do not have magicPin or ScrollTrigger defined:
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);
}
}
I am just wondering how to define it in the components that don’t have or need it.