Bind ion-content as scroller of GSAP Timeline in Ionic 6

[Nbiaz]

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!

[OSUblake]

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?

[Nbiaz]

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 ... ..... ....... 

[OSUblake]

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

 

[Nbiaz]

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!!