JustinLP

I keep getting this error when I scroll past a section on a page that uses ScrollTrigger and MagicPin() and then go to another page and then hit the back button. "ScrollTrigger.js:1384 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'pin')". See the code for the component below. I keep doing console.log, but I can't figure out why the pin parameter is still undefined and it only happens when using the back button. I added "await" to it in "async" and everything. import {Component} from 'bona'; import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; import {magicSlideElementAppear} from '../lib/transitions'; import Swiper from 'swiper'; import {Autoplay, Navigation} from 'swiper/modules'; export default class Worth extends Component { constructor() { super(...arguments); this.header = this.el.querySelector('.worth-header'); this.action = this.el.querySelector('.worth-action'); this.carousel = this.el.querySelector('.worth-carousel'); this.items = this.el.querySelector('.worth-items'); this.item = this.el.querySelectorAll('.worth-item'); this.main = this.el.querySelector('.worth'); this.mm = gsap.matchMedia(); } async onInit() { await this.magicPin(); this.magicShow(); this.initCarousel(); } async onDestroy() { this.mm.kill(true); } magicPin() { ScrollTrigger.matchMedia({ '(min-width:768px)': () => { ScrollTrigger.create({ trigger: this.main, pin: true, pinSpacing: false, }); }, }); } initCarousel() { this.mm.add('(min-width: 768px)', () => { this.worthCarousel = new Swiper(this.carousel, { modules: [Autoplay], wrapperClass: 'worth-items', slideClass: 'worth-item', slidesPerView: 'auto', speed: 8500, loop: true, allowTouchMove: false, autoplay: { delay: 0, disableOnInteraction: false } }); return () => this.worthCarousel.destroy(true, true); }); } magicShow() { if (this.header) magicSlideElementAppear(this.header); if (this.action) magicSlideElementAppear(this.action); if (this.carousel) magicSlideElementAppear(this.carousel); } }