Miguel Brave

I found the solution, we have to used "will-change: transform" to optimize the browser performance. You can see here: http://www.wearebrave.net/proyectos/SCROLL/

Hi OSUblake, the scroll-behavior is added when use the "snap" option. I modified the code again without snapping but the scroll with trackpad doesn´t work fine. Only works when you release the finger of trackpad.

I simplified my code. It works fine in mobile, Safari and Firefox. In Google Chrome works with mouse wheel but not with trackpad: http://www.wearebrave.net/proyectos/SCROLL/ However, in Codepen goes fine with all including Goggle Chrome with trackpad: https://codepen.io/miguel_brave/pen/GRMRqJQ The mystery continues... perhaps is my Chrome version? (Versión 96.0.4664.55 (Build oficial) (x86_64))

Ok, I´m going to follow your instructions. I will show you my solution when I finish. Thanks a lot again Cassie!

I am not using video, is only the name of the class, sorry for the nomenclature... I want to do a mask effect scrolling sections like in this site (without the intro sprite "video" on scroll, only the sections with image and text): https://www.cavuventures.com/ In local, does my example move the clip-path mask when you move your finger in the trackpad without release? Or is moving the clip-path when you release? I´m testing in Google Chrome, important! It is working fine in Safari and Firefox. It doesn´t work fine in Chrome... but in Codepen Chrome is going fine! I don´t understand what is the difference. The site https://www.cavuventures.com/ has solved the problem with Chrome.

In CodePen is ok trackpad but, the same code, in local or hosting doesn´t work well in trackpad. You can see the different behavior here: http://www.wearebrave.net/proyectos/SCROLL/. Adjunt my files. Thanks for your help Cassie. WEB-ScrollTrigger.zip

Thanks Cassie, but the problem is the transition with "clip-path: polygon" property. If you change this property for another one the problem is solved. I need to use ScrollTrigger plugin.

Hi, I´m working with GSAP and ScrollTrigger trying to do a mask effect with clip-path css property. You can see an example here: http://www.wearebrave.net/proyectos/SCROLL/ The scroll mouse desktop and mobile works well but doesn´t with Trackpad of desktop. The events of ScrollTrigger are not launched with the move of finger over the trackpad. I changed the "polygon" property for "inset" and go ok. I put the same code in CodePen and it works well with "polygon"! You can see the same code here: https://codepen.io/miguel_brave/pen/GRMRqJQ My reference web is https://www.cavuventures.com/, I think they use GSAP and Scrolltrigger but trackpad go perfect with the same "polygon" property animation. Could anybody help me? I don´t understand why trackpad works well with "polygon" transition in CodePen but doesn´t in my hosting. Regards,