Как при Draggable.create заставить срабарывать функцию scrollTriggerUpdate()?

Question

[webhero]

window.addEventListener('resize', updateScrollTrigger)
const servicesBox = document.querySelector('#services__box')
if (servicesBox) {
	const servicesBoxRect = servicesBox.getBoundingClientRect()
	console.log(servicesBoxRect)
	const servicesBoxRectTop = servicesBoxRect.top + window.scrollY
	console.log(servicesBoxRectTop)
	const srvs = servicesBox.querySelector('.srvs')
	const srvsDescs = servicesBox.querySelectorAll('.srvs__desc')
	const servicesTitles = servicesBox.querySelector('.services__titles')
	const srvsMenu = servicesBox.querySelector('.srvs__menu')
	const srvsCircleItemsWrap = servicesBox.querySelector('.srvs__circle-items')
	const srvsCircleItems = servicesBox.querySelectorAll('.srvs__circle-item')
	const srvsCircleItemsIcons = []
	const degree = 360 / 8
	srvsCircleItems.forEach(srvsCircleItem => {
		const icon = srvsCircleItem.querySelector('.srvs__circle-item-icon')
		srvsCircleItemsIcons.push(icon)
	})
	const maxRoundDegree = degree * (srvsCircleItems.length - 2)

	const srvsDescsDisc = {
		start: srvs.offsetTop,
		shift: 100,
		end: srvs.offsetTop + 350,
	}

	ScrollTrigger.create({
		trigger: '#services__box',
		start: 'top top',
		// endTrigger: '#services__box',
		// end: 'bottom bottom + 550px',
		end: 'bottom bottom',
		// markers: {
		//   startColor: 'white',
		//   endColor: 'white',
		//   fontSize: '18px',
		//   fontWeight: 'bold',
		//   indent: 20,
		// },
		onUpdate: self => {
			scrollTriggerUpdate(self)
		},
	})

	Draggable.create('#services__box .srvs__circle-items', {
		type: 'rotation',
		onDrag: function () {
			const progress = (this.rotation % 360) / 360
			scrollTriggerUpdate({ progress })
			ScrollTrigger.update()
			console.log('Drag event triggered')
		},
	})

	scrollTriggerUpdate()

	function scrollTriggerUpdate(self) {
		const y = window.scrollY - servicesBoxRectTop

		if (y > 0) {
			servicesTitles.style.transform = `translateY(${y}px)`
			srvsMenu.style.transform = `translateY(${y}px)`
		}

		srvsDescs.forEach(srvsDesc => {
			const yD = srvsDesc.offsetTop - Math.max(y, 0)

			if (yD > srvsDescsDisc.start && yD < srvsDescsDisc.end) {
				srvsDesc.style.opacity = 1
			} else {
				const shift =
					Math.min(
						Math.abs(srvsDescsDisc.start - yD),
						Math.abs(yD - srvsDescsDisc.end)
					) / srvsDescsDisc.shift
				srvsDesc.style.opacity = 1 - shift
			}
		})

		const curInd = Math.floor(
			(maxRoundDegree * Number(self?.progress || 0)) / degree
		)
		const curDegree = maxRoundDegree * Number(self?.progress?.toFixed(3) || 0)

		srvsCircleItemsWrap.style.transform = srvsCircleItems.forEach(
			(srvsCircleItem, srvsCircleItemInd) => {
				const ind = (srvsCircleItemInd - curInd) % srvsCircleItems.length

				if (Math.abs(ind) < 4) {
					srvsCircleItem.style.transform = `rotateZ(${
						-1 * ind * degree + (curDegree % degree)
					}deg)`
					const scl = Math.pow(Math.max(Math.abs(ind), 0), 3)
					srvsCircleItem.style.filter = `blur(${scl * 0.5}px)`
					if (Math.abs(ind) > 4) srvsCircleItem.style.opacity = 0 //2
					else srvsCircleItem.style.opacity = 1

					if (srvsCircleItemsIcons[srvsCircleItemInd])
						srvsCircleItemsIcons[
							srvsCircleItemInd
						].style.transform = `rotateZ(${
							ind * degree + -1 * (curDegree % degree)
						}deg)`
				} else if (Math.abs(ind) > srvsCircleItems.length - 4) {
					srvsCircleItem.style.transform = `rotateZ(${
						(4 - srvsCircleItems.length - ind) * degree + (curDegree % degree)
					}deg)`
					const scl = Math.pow(Math.max(srvsCircleItems.length - ind, 0), 3)
					srvsCircleItem.style.filter = `blur(${scl * 0.5}px)`
					if (Math.abs(ind) < srvsCircleItems.length - 2)
						srvsCircleItem.style.opacity = 0
					else srvsCircleItem.style.opacity = 1

					if (srvsCircleItemsIcons[srvsCircleItemInd])
						srvsCircleItemsIcons[
							srvsCircleItemInd
						].style.transform = `rotateZ(${
							-1 *
							((4 - srvsCircleItems.length - ind) * degree +
								-1 * (curDegree % degree))
						}deg)`
				} else {
					srvsCircleItem.style.opacity = 0
					srvsCircleItem.style.filter = 'none'
				}
			}
		)
	}

	// + -1 * curDegree
}

function updateScrollTrigger() {
	if (window.innerWidth <= 992) {
		// 768px is a common breakpoint for mobile devices
		// Kill all ScrollTriggers if on mobile
		if (ScrollTrigger.getAll().length > 0) {
			ScrollTrigger.getAll().forEach(trigger => trigger.kill())
		}
	} else {
		// Reinitialize ScrollTrigger for non-mobile devices
		scrollTriggerUpdate()
	}
}
updateScrollTrigger()