Did you find a solution?
From what I understand of ionic we have at least 2 problems.
1) it uses a sort of virtual dom and the main.inner-scoll element is rendered inside the virtual dom.
2) the element to whom the scroll is applied is the ion-content element
An almost working solution is to pass the event detail to a class property
In the ion-content tag we can use [scrollEvents]="true" and (ionScroll)="logScrolling($event)" to pass to the method the scroll event.
logScrolling(ev){
this.scroll = ev.detail
}
then we have a getter function to retrieve the value
getScroll(){
if(!this.scroll){
return {scrollTop:0}
}
return this.scroll
}
finally we can use ScrollTrigger.scrollerProxy in this way
initAnimations(){
gsap.registerPlugin(ScrollTrigger);
const scrollProxy = document.getElementsByTagName('ion-content').item(0)
const self = this
ScrollTrigger.scrollerProxy(scrollProxy, {
scrollTop(value){
return self.getScroll().scrollTop ; // getter
},
getBoundingClientRect() {
return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
}
});
gsap.to('#imgAnimate',{
scrollTrigger:{
trigger:'#imgAnimate',
start:"top center",
markers:true,
toggleActions:"restart pause reverse pause",
scroller:scrollProxy
},
rotation:360,
duration:3
})
}
the initAnimations function needs some work but at least is working.
Sorry for my english I hope this could be of some help.