[GSAP ScrollTrigger with clip-path polygon]

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/

[GSAP ScrollTrigger with clip-path polygon]

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.

[GSAP ScrollTrigger with clip-path polygon]

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: 

 

The mystery continues... perhaps is my Chrome version? (Versión 96.0.4664.55 (Build oficial) (x86_64))

[GSAP ScrollTrigger with clip-path polygon]

Ok, I´m going to follow your instructions. I will show you my solution when I finish.

 

Thanks a lot again Cassie!

[GSAP ScrollTrigger with clip-path polygon]

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. 

 

[GSAP ScrollTrigger with clip-path polygon]

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

[GSAP ScrollTrigger with clip-path polygon]

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.

[GSAP ScrollTrigger with clip-path polygon]

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: 

 

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,

 

See the Pen GRMRqJQ by miguel_brave (@miguel_brave) on CodePen