Nbiaz Posted December 10, 2021 Share Posted December 10, 2021 I am implementing GSAP in an Ionic application (v 6.18.1). I cannot create a ScrollTrigger that identifies the ion-content component as a scroller. I found a workaround that carries some glitches due to the fact that the start and end parameters set to 'center' move by scrolling and return to center when not scrolling so with pin:true (and i need it) there is an obvious glitch. Here the code of my component: ngOnInit() { gsap.registerPlugin(ScrollTrigger); gsap.utils.toArray('.section').forEach((r) => { this.scaleFrom0(r); }); } scaleFrom0(trigger) { const animation = timeline() .from(trigger, { scale: 0, }) .to(trigger, { scale: 2, }) return ScrollTrigger.create({ animation, trigger, scroller: '.content-scroll', scrub: 2, snap: 1 / 2, pin: true, pinSpacing: true, start: `top center`, end: '+=1000px center', markers: true, }); } .content-scroll { position: absolute; // border: solid 1px red; // margin: 50px; left: 0; top: 0; right: 0; bottom: 0; overflow-y: scroll; overflow-x: hidden; -ms-overflow-style: none; scrollbar-width: none; background: rgb(0, 0, 0, 0.5); // background: var(--ion-color-primary); } <ion-content> <div class="content-scroll"> <div class="presenter"> <strong>TITLE</strong> </div> <div class="section"> <app-section></app-section> </div> <div class="section"> <app-section></app-section> </div> <div class="section"> <app-section></app-section> </div> <div class="section"> <app-section></app-section> </div> </div> </ion-content> I want to delete the div.content-scroll and bind ion-content as scroller into ScrollTrigger.create() or SOMETHING FOR TO STOP GLITCHES!! I tried: scroller: document.querySelector('ion-content') ion-content class=".content-scroll" But I dont see markers anymore... How can I stop the markers when i'm scrolling? Some tips? Thanks to everybody in advance! Link to comment Share on other sites More sharing options...
OSUblake Posted December 10, 2021 Share Posted December 10, 2021 Welcome to the forums @Nbiaz It's very hard to troubleshoot this blind, and there are no guarantees that this will even be possible if Ionic is messing around with the scroll, but can you put together a minimal demo like on Stackblitz or CodeSandbox? Link to comment Share on other sites More sharing options...
Nbiaz Posted December 10, 2021 Author Share Posted December 10, 2021 Hi! First of all thanks for the prompt reply!! I have implemented a small example here: https://stackblitz.com/edit/ionic-72rorw?file=pages/home/home.ts If you scroll slowly it seems to be fine (even if it's ugly to see I know :D) but if you scoll fastly everything starts to sway !! You can see this from the markers that move in the direction of the scroll for some px and return to the original position when scroll is end. I tried a lot of solutions but ... ..... ....... Link to comment Share on other sites More sharing options...
Solution OSUblake Posted December 10, 2021 Solution Share Posted December 10, 2021 I think the problem is that you have content overflowing, so you could set overflow to hidden on a wrapper. https://stackblitz.com/edit/ionic-wxueqy?file=pages%2Fhome%2Fhome.ts Link to comment Share on other sites More sharing options...
Nbiaz Posted December 11, 2021 Author Share Posted December 11, 2021 15 hours ago, OSUblake said: I think the problem is that you have content overflowing, so you could set overflow to hidden on a wrapper. https://stackblitz.com/edit/ionic-wxueqy?file=pages%2Fhome%2Fhome.ts This is good! You only add the div.wrapper ? Couse works on stackblitz but not on my fuckin project!! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now