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!
