[ScrollTrigger - Pin element and custom scroller jerky a lot]

Hello,

 

Yes, the problem has been solved.

 

But I have a few questions: 
- If we define a "target", is the "normalizeScroll" encapsulated in that "target"? Or is it always global to all ScrollTrigger on the page?
- In the "normalizeScroll" documentation, I don't see anything explaining this "target" parameter. Perhaps you need to add an entry to explain it?

 

Thx,
Simon

[ScrollTrigger - Pin element and custom scroller jerky a lot]

Hi @Rodrigo,

 

If you look at it in an IOS mobile you will see the error I am talking about. It's the exact same bug. I tested it on an iPhone 12 Pro IOS v.17.3.1. I also tested it on Android and this is working fine.

I know there are workarounds on IOS, but nothing seems to work as I explain in my first post.

 

I have solved my issue putting pinType: fixed; but I have rework multiple thing in my application (remove transform on parents, work on a new lifecycle, etc...) but I think this is a bug in ScrollTrigger.

 

Thx,

Simon

[ScrollTrigger - Pin element and custom scroller jerky a lot]

Hello @Rodrigo,

 

Thanks for the answer.

 

The pinType is already equal to transform since the scroller isn't the body as explained in your documentation.

I also tried to remove the transform just to be sure that there is working without it but even without transform this is not working in mobile.

 

If I remove the overflow: auto; (and everything linked to it), it's working as expected. But I can't do that in a real project.

 

Thx,

Simon

[ScrollTrigger - Pin element and custom scroller jerky a lot]

Hello,

 

I have an issue with ScrollTrigger in mobile when I use it inside a panel.

 

What's the user path : 

1. He is in the home.
2. He clicks on a button which open a panel from the right to the left (with a transform: translateX).
3. When the panel is fully shown, the user can scroll inside the panel (not the page) and there is a box which is sticky inside this panel.

I have tried : 

• ScrollTrigger.normalizeScroll(true); : But the scroll inside my panel isn't working anymore.
• ScrollTrigger.normalizeScroll({allowNestedScroll: true}) : As explain here. Doesn't change anything.
• Second try + pointer-events: none; : As explain here.  The scroll doesn't work anymore (same as first try)
• pinType: "fixed" : It works, but only if I have not the transform on a parent.

 

I need to have this transform because of the panel's apparition animation.

 

Do you have an idea how I can fix this ? 

 

Thx,

Simon

See the Pen JjVdKjX by simon-gioffredi (@simon-gioffredi) on CodePen

[ScrollTrigger - How can I stop the Scroll, do animation, then continue scroll ?]

Hi,

With both of you, I succeeded to do what I want
 

@Cassie You had perfectly right about pinSpacing. That was a problem.

I tried at first to put pinSpacing into variable, and when the dog's timeline finishes, refresh the pinSpacing, but that's doesn't work.

 

So I looked what have done @akapowl and that was exactly what I want.

 

The only problem, it's the css which goes with. I can't do that "easely" and "properly" in my project. 

 

With all of this, I took what you did (in js) and I only added few things.

 

I gave to my section a marginBottom who is equal to the height we have to scroll, and disabled the pinSpacing 

 

In some way, I think I do my "own" pinSpacing

See the Pen LYWGxRj by simon-gioffredi (@simon-gioffredi) on CodePen

 

 

Thank you so much for your help

 

[ScrollTrigger - How can I stop the Scroll, do animation, then continue scroll ?]

Hello,

 

At first, sorry for my english, I'm not a native english speaker.

 

I have a problem with ScrollTrigger. That's my first time using it, so maybe I don't do it correctly.

 

What I want : 

•  First : Scroll inside the div with the dog in background, to see the image entirely. When I do that, I do not want the content of the div (white rectangle) moves.
• Second : When the dog is fully shown, I want to continue the "normal" scroll, by pinning the dog section, and having blue section who moves upside the dog.

 

What I have : 

• The dog moves like I want, but the next section moves instantly
• The content moves too, and pin after the first ScrollTrigger

 

Is that clear enough ?
Thanks if you look

 

See the Pen poeggRw by simon-gioffredi (@simon-gioffredi) on CodePen