daveodden

roger that! I will set up a minimal demo after we release this work to explain the problem! thanks yall

Hey all, by using `z-index: 3 !important` on the .pin-spacer, I was able to mitigate the primary issue I've been seeing in older devices. I had concerns about targeting that specific pin-spacer but was able to use the sibling selector in css to target that specific pin-spacer reliably. I am _still_ seeing some unexpected behavior with the pin spacer periodically on older devices that I plan to investigate to gather a better understanding and will report back about that. I am still curious if the GSAP team tests in older browsers/devices.

I'll tinker with altering css/js and get back to you

Hey GSAP Team! My team at work has implemented a "sticky" header using scrollTrigger and have seen some issues on some older device's browsers (iPhone SE, 8, 1st gen iPad Mini, etc.) where the header underlaps content. it seems that the z-index value of the pin-spacer is 0 instead of 3 - like it is in newer browsers/devices. My question is what compatibility should we expect with scrollTrigger's pinning functionality?

wooooo, boy, that seems to do the trick! I was hoping it'd be something that simple - and for some reason it didn't dawn on me to use that property! Thanks @akapowl. I appreciate your quick response as well. I tried to minimize the demo, but, it's a biggin'. Thanks again!

Hey GSAP Folks, First I'd like to say great products and great support! Ya'll really have some patience in this forum. I'm having a problem I cannot seem to figure out... A pinned component after a complex ScrollTrigger component has the wrong start position and ends up breaking the experience. This only happens when refreshing (or starting) the page on a mobile sized width and expanding the browser to a desktop size. I've also noticed intermittent issues when reloading the page on mobile, the start position is off on my second pinned component out the gate. Using the age-old technique of commenting out code to figure out what's causing it, I believe the ScrollTrigger instance labelled "left side copy block scrubbing (paused scrolling)" in my demo is what's causing it, but do not understand why, or how to fix it. I've read around here a lot and cannot seem to locate a solution. Any assistance is much appreciated!! Notes: - The CodePen is a paired down portion of the page I've created that focuses on the components in question and has all proprietary data, names, styles, etc removed - thus it looks the way it does.. - The app I've created is in React, so each section on the page is its own component with segregated code - each section's scrollTrigger instances are in their own component's files. - the client I am building this for has a Club Greensock membership.

I solved this same issue using NgZone. This is not a complete example, but shows that I am invoking the `setPage()` function in my Angular 8 component from the onComplete property in the timeline's .to() declaration. Without the ngZone.run() within the setPage() function, the view doesn't know that the value has changed. With ngZone, it works as intended. enterAnimation( _ElRefSet ) { let $nativeEls = this.generateArrayOfNativeElements( _ElRefSet ); let tl = new TimelineMax(); tl.to($nativeEls, { scale:"1", opacity: "1", duration:.125, stagger: .075, onComplete: this.setPage, callbackScope: this }, "-=.125"); return tl; } setPage() { this.ngZone.run( () => { this.currentPage++; }); } Love you guys!