Jump to content
Search Community

ScrollTrigger - Pin element and custom scroller jerky a lot

Spin Interactive test

By Spin Interactive
in GSAP

Moderator Tag
 Share
Go to solution Solved by GreenSock,

Recommended Posts

Spin Interactive test

Spin Interactive

Posted
Posted

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

Link to comment
Share on other sites
  • Spin Interactive changed the title to ScrollTrigger - Pin element and custom scroller jerky a lot
Rodrigo test

Rodrigo

Posted
Posted

Hi,

 

The reason is because of this:

https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children

 

You can try a couple of things set the initial position of your menu panel to be at the right of the screen and use a from instance that takes the element from xPercent: 100 to 0 and when the instance is completed use clearProps to remove the transform applied by GSAP so pinning works as expected.

 

Another option is to use pinType: "transform" in your ScrollTrigger config: 

ScrollTrigger.create({
  //...
  pinType: "transform",
});

pinType
"fixed" | "transform" - by default, position: fixed is used for pinning only if the scroller is the <body>, otherwise transforms are used (because position: fixed won't work in various nested scenarios), but you can force ScrollTrigger to use position: fixed by setting pinType: "fixed". Typically this isn't necessary or helpful. Beware that if you set the CSS property will-change: transform, browsers treat it just like having a transform applied, breaking position: fixed elements (this is unrelated to ScrollTrigger/GSAP).

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites
Spin Interactive test

Spin Interactive

Posted
  • Author
Posted

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

Link to comment
Share on other sites
Rodrigo test

Rodrigo

Posted
Posted

Hi,

 

Your demo doesn't actually reflect that: 

ScrollTrigger.create({
  trigger: ".sticky",
  scroller: "#base-test-scroll-trigger",
  start: "top top",
  endTrigger: ".end",
  end: "bottom bottom",
  pin: true,
  pinSpacing: false,
  invalidateOnRefresh: true,
  markers: true
});

I think there could be something else in your setup causing this, because this demo seems to work as expected:

See the Pen GRLpRQx by GreenSock (@GreenSock) on CodePen

 

Unfortunately if you  don't provide a minimal demo that clearly illustrates the issue is really hard for us to do much about it.

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites
Spin Interactive test

Spin Interactive

Posted
  • Author
Posted

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

Link to comment
Share on other sites
GreenSock test

GreenSock

Posted
Posted

By default, the normalizeScroll() feature targets the main window/body scroller, but it looks like you're using something different. So set that as the target in your normalizeScroll() call:  

ScrollTrigger.normalizeScroll({
  allowNestedScroll: true,
  target: ".side-menu"
});

See the Pen GRLpRQx?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you're looking for? 

  • Like 2
Link to comment
Share on other sites
Spin Interactive test

Spin Interactive

Posted
  • Author
Posted

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

Link to comment
Share on other sites
  • Solution
GreenSock test

GreenSock

Posted
  • Solution
Posted
17 hours ago, Spin Interactive said:

- If we define a "target", is the "normalizeScroll" encapsulated in that "target"? Or is it always global to all ScrollTrigger on the page?

Yeah, the "target" is telling it which element's scroll to normalize. Typically that's the document.scrollingElement (body or html). So yeah, if you target a sub-element, it just normalizes that. 

 

17 hours ago, Spin Interactive said:

- In the "normalizeScroll" documentation, I don't see anything explaining this "target" parameter. Perhaps you need to add an entry to explain it?

Yes, that was intentional because I honestly didn't think anyone would ever need this feature but I baked it in anyway just in case, but I didn't document it because I wanted to see if anyone would ever even need it. If enough time went by and nobody did, we could consider safely removing it. 🙂

 

Glad it's fixed now!

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...