darkgr33n

Thanks for your help Rodrigo, I was a little lost as to how best to tackle this, but your reply certainly helped me look at it in a different way 
 
I needed the background transparency animation from my original pen though, and after a bit of messing about, it became obvious that I really needed to separate the change in height from the background transparency so I could involve some kind of scrub on the height change, otherwise it felt a bit jerky.

I think i've achieved this now but i'm not sure how well its constructed, but it seems to work at least!


See the Pen XWyjXOq by darkgr33n (@darkgr33n) on CodePen
 

I couldn't get it to work so decided to go down  the flickity route which worked instantly.  

Thanks for the quick reply Zach -- I only realised as I got to the end of the question!
 
OK, so I can get it to work if I do this:
 
ScrollTrigger.matchMedia({ // please don't touch     "(pointer: fine)": function() {      ScrollTrigger.defaults({          scroller: '.inner'         })      }  }); Does that seem reasonable ?

The whole ASScroll call now being:
// ASScroll var asscroll = new ASScroll.default({ customScrollbar: true, disableOnTouch: true, scrollbarHandleEl: '.my-scrollbar-handle', disableNativeScrollbar: true }); ScrollTrigger.matchMedia({ // please don't touch "(pointer: fine)": function() { ScrollTrigger.defaults({ scroller: '.inner' }) } }); ScrollTrigger.scrollerProxy(".inner", { scrollTop(value) { return arguments.length ? asscroll.scrollTo(value) : -asscroll.smoothScrollPos; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight } } }); asscroll.on("raf", ScrollTrigger.update); ScrollTrigger.addEventListener("refresh", () => asscroll.onResize()); window.addEventListener("load", () => { var totalScroll = document.querySelector(".asscroll-container").scrollHeight - innerHeight; asscroll.enable(false, true, document.querySelector(".inner")); });  
Cheers!