[Another zIndex Safari issue with ScrollTrigger =(]

@GSAP Helper I created a minimal demo but after starting the project on iPhone i just receive "unknown error" with the black screen 🫣 The project is working fine on desktop, but i don't have any problems here.

 

https://stackblitz.com/edit/nuxt-starter-2oywku?file=pages%2Findex.vue

[Another zIndex Safari issue with ScrollTrigger =(]

Hello, colleagues,

 

I'm faced with another one mobile Safari issue. 

This is how it should work and it work in any other browsers => https://youtube.com/shorts/ShZ4IlI2AEI

This is how it works in mobile Safari => https://youtube.com/shorts/r5BSIsRKXZk

 

Short version of my code is below:

      initMobile(triggerBlock, animatedCards, animDuration, idx) {
        const cards = this.$gsap.utils.toArray(animatedCards)
        const timeline = this.$gsap.timeline({ paused: true })
        cards.forEach((card) => {
          timeline.to(card, {
            y: 0,
            x: 0,
            z: 0,
            transformPerspective: 30,
            boxShadow: '0px 0px 13px rgba(0, 0, 0, 0.3)'
          })
        })
        const config = {
          trigger: triggerBlock,
          start: 'top top',
          end: '+=' + animDuration,
          pin: true,
          scrub: true,
          animation: timeline
        }
        this.$ScrollTrigger.create(config)
      }

 

I already tried a lot of options: with different z-indexes (i know about this Safary's "feature"), with "fromTo", with "to", animating "yPercent", "y" only. The final version is with x/y/z animation to force "transform3d". Nothing is helpful

I have no any other ideas. Could you please help?

 

Thanks

 

[Non-fullpage slider with pinned element]

@Cassie @Rodrigo

 

First of all, I really appreciate your help and participation.

 

Thanks to Cassie's example, I've created a solution that is very close to my expectations. The delay after pinning and before unpinning is a little bit confusing, but it's ten times better than what I had before.

v2

 

The next question is about the "intentObserver" part of the example. I don't quite understand how it prevents normal scrolling. Therefore, I'm planning to study the documentation that Cassie attached to her last comment.

[Non-fullpage slider with pinned element]

@Cassie Hi, Cassie!

 

Thanks a lot for your answer. I'm going to deal with this example, but, omg, i can't even understand how it works 🫣 

[Non-fullpage slider with pinned element]

Hello there,

 

I would like to make a slider at the same time as a pinned element so that scrolling is possible only after all slides have been scrolled.

Please, look at the example i have prepared.

 

I've made a slider that work, but so many bugs there  Could you please help me to find a better way to solve my problem?

See the Pen QWzwJVX by rojangsc-the-selector (@rojangsc-the-selector) on CodePen