Jump to content
Search Community

mdgb

Members
  • Posts

    1
  • Joined

  • Last visited

mdgb's Achievements

1

Reputation

  1. 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.
×
×
  • Create New...