Can anyone understand why the pinned area dissapears during a pin and then comes back after the pin is complete?

[darkus]

I have the following codepen which shows the example.  In this example, there is a scrolltrigger (brokenPin) that pins an element, but all its content dissapears during the pin and then comes back after the pin is complete.   I've explicitly set the pinType to be 'fixed', as this is what I belive to be the default behavior and works better in most cases.  The transform pin has a weird bouncing effect that isnt that nice, so I'd rather have it as fixed.  On my real page, if I change it to transform type, then the pinspacing doesnt work for whatever reason and the scrolltriggers following the pinnned area come in immediatly.  This latter part I cant reproduce on codepen yet.  So my main question is the first part, why is everything disappearing, and is there any way around it besides switching to a transform pintype?

 

 

 

See the Pen XWygYjX by darkuss (@darkuss) on CodePen

[GreenSock]

This has nothing to do with GSAP - if you set position: fixed on an element that's INSIDE another element that has a transform applied (which is what smooth scrolling does), that position: fixed will be relative to the container with the transform applied, NOT the viewport. You can try it on your own without any GSAP/ScrollTrigger. It creates a new stacking context or something like that. 

 

Why did you set pinType: "fixed"? The default behavior automatically figures it out for you and uses pinType: "transform" which is the appropriate one in this context. You mentioned some kind of "bouncing" effect - what do you mean? Is it just on mobile? If so, there are several solutions you can choose from (because on mobile, ScrollSmoother disables smoothing): 

1. Try setting ScrollTrigger.normalizeScroll(true)
2. Set pinType: ScrollTrigger.isTouch ? "fixed" : "transform" 
3. Set a small smoothing amount on mobile, like smoothTouch: 0.1

You only need to choose ONE of the above options. 

[darkus]

9 minutes ago, GreenSock said:

This has nothing to do with GSAP - if you set position: fixed on an element that's INSIDE another element that has a transform applied (which is what smooth scrolling does), that position: fixed will be relative to the container with the transform applied, NOT the viewport. You can try it on your own without any GSAP/ScrollTrigger. It creates a new stacking context or something like that. 

 

Why did you set pinType: "fixed"? The default behavior automatically figures it out for you and uses pinType: "transform" which is the appropriate one in this context. You mentioned some kind of "bouncing" effect - what do you mean? Is it just on mobile? If so, there are several solutions you can choose from (because on mobile, ScrollSmoother disables smoothing): 

1. Try setting ScrollTrigger.normalizeScroll(true)
2. Set pinType: ScrollTrigger.isTouch ? "fixed" : "transform" 
3. Set a small smoothing amount on mobile, like smoothTouch: 0.1

You only need to choose ONE of the above options. 

So to get a little more detailed on the issue,

 

On desktop everything is working great out of the box (with scrollsmoother).  When loading the same exact page on iOS/mobile, the page has studdered scroll and pull to refresh dont work, so I decided to make an if/else statement and when we are on mobile, we dont load scrollsmoother

 

if (isMobile == true)
    {

        gsap.registerPlugin(ScrollTrigger,MotionPathPlugin, Flip);
    }
else
    {

        gsap.registerPlugin(ScrollTrigger, ScrollSmoother, MotionPathPlugin, Flip);
        
        
        smoother = ScrollSmoother.create({
            wrapper: "#smooth-wrapper",
            content: "#page",
            effects:true,
                smooth:1.2,
        });    

    }   

 

 

With this the page 'feels' great on both Desktop and iOS/mobile, but then the next problem was the pin dissapears as mentioned in the OP.

 

I was assuming the pinType was being automatically being set to 'transform' while on desktop (because of scrollsmoother) and then now fixed for mobile.   So I went ahead and forced 'transform' on the mobile version as well.   That didnt work, so then I told it to pin it to the scroll-smoother outer html container  pin:(isMobile == true) ? "#smooth-wrapper" : true. 

 

Well that did solve the problem of the pin dissapearing, and it now shows up during scroll.  But then a new problem arose, that all the triggers for animations after that pin were completly misaligned and firing to early. 

 

So now back to putting scrollSmoother back on for mobile and then turning normalizeScroll off.  By turning it off, the page now acts and 'feels' native on iOS, but then I get the weird jelly bouncing of the elements inside the pin.  I feel like im in a catch22 no matter what I do

 

Specifially to your suggestions:

1. Setting normalize scroll to true, makes iOS feel non native.  Pull to refresh doesnt work well, and flicking to scroll fast is a bit jerky and feels uncharacteristically non slick by GSAP standards.  Making smoothtouch a low number has helped with this, but still not great.

2. That is fine, and is my original plan, but is being stymied by the above things.

 

As I mentioned, I feel like there is probably a simple solution here but anywway I got at it, I hit some kind of wall.  I figured solving why an area dissapears with a pin is the best method of attack.    Now reading up I can see this strange thing about transform not being relative.  So strange!

[darkus]

@GreenSock

So as a follow-up.  I just discovered pinReparent.  Setting that to true, completely fixed my problem.  It seems to work on my actual page, and in the codepen example

 

Hope I'm not doinganything terribly wrong by using it, but it seems to do the trick....

 

 

Heres a fork using pinReparent

See the Pen YzRQvQe by darkuss (@darkuss) on CodePen

[Rodrigo]

Hi,

 

I don't see anything that comes out as bad or potentially problematic in your code.

 

Just an FYI, I tried this and seems to work fine on an iPad and android phone:

let smoother = ScrollSmoother.create({
  wrapper: "#smooth-wrapper",
  content: "#page",
  effects: true,
  normalizeScroll: true,
  smoothTouch: 0.1
});

let brokenPin = gsap.timeline({
  scrollTrigger: {
    trigger: ".pinme",
    pin: true,
    start: "top top",
    scrub: 1,
    end: "+=" + pinAmount
  }
});

Here is a fork of your codepen:

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

 

Here you can see the debug version (no iframes):

https://cdpn.io/pen/debug/oNQevgB

 

Now if the current version you have is working as expected, then keep it. Just sharing some insight about it in case it's helpful.

 

Happy Tweening!

[darkus]

4 hours ago, Rodrigo said:

Hi,

 

I don't see anything that comes out as bad or potentially problematic in your code.

 

Just an FYI, I tried this and seems to work fine on an iPad and android phone:

let smoother = ScrollSmoother.create({
  wrapper: "#smooth-wrapper",
  content: "#page",
  effects: true,
  normalizeScroll: true,
  smoothTouch: 0.1
});

let brokenPin = gsap.timeline({
  scrollTrigger: {
    trigger: ".pinme",
    pin: true,
    start: "top top",
    scrub: 1,
    end: "+=" + pinAmount
  }
});

Here is a fork of your codepen:

 

 

 

Here you can see the debug version (no iframes):

https://cdpn.io/pen/debug/oNQevgB

 

Now if the current version you have is working as expected, then keep it. Just sharing some insight about it in case it's helpful.

 

Happy Tweening!

Yup, with normalizeScroll it does work, but you lose the ability to pull down to refresh on iphone/ipad so it looses the true native feel of a webpage