GSAP ScrollTrigger with clip-path polygon

[Miguel Brave]

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

[Cassie]

Hi Miguel!

That site isn't actually using scrolling - it's using wheel/touchmove/pointermove events to sense when the user wants to "scroll" to the next section.

 

This thread should help you if you want to go with this approach.

 

 

[Miguel Brave]

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.

[Cassie]

Could you explain in more detail what the issue is Miguel?

I'm using a desktop trackpad and this is working fine.

 

 

[Miguel Brave]

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

[Cassie]

Sorry Miguel,

I'm really confused here. I opened that link on my mac, with a trackpad and it's working fine for me - just the same as codepen. Unless I'm misunderstanding what the desired outcome is?

I'm not really sure why you're approaching the clip paths like this either, there's a lot of other code in there for playing videos frame by frame so maybe it fits into the wider approach you're taking?

But I would probably do the clip path tweening like this?

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

[Cassie]

This is obviously simplified down and you'd need to loop around in your use case, but just trying to strip this back and nail down what the issue is!

[Miguel Brave]

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. 

 

[Cassie]

Ok - so is the video stuff leftover from a pen you've copied this from?

If so, it's not really necessary - just use a normal tween tied to scroll like the last example I provided.

It moves without release.

4 minutes ago, Miguel Brave said:

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?

 

[Miguel Brave]

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

 

Thanks a lot again Cassie!

[Cassie]

Glad I could help pal! Good luck ✨

[Miguel Brave]

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))

[OSUblake]

4 hours ago, Miguel Brave said:

The mystery continues... perhaps is my Chrome version?

 

If it works in CodePen but not on your site, then your site is doing something different than CodePen. This is most likely your problem. Get rid of that scroll-behavior.

 

 

 

 

 

 

[Miguel Brave]

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.

[OSUblake]

1 hour ago, Miguel Brave said:

the scroll-behavior is added when use the "snap" option.

 

Ah, sorry about. I didn't realize it did that.

 

I definitely see an issue with it on my mac, even without using the trackpad. Please standby while will investigate this.

 

[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/

[OSUblake]

Oh, interesting! will-change can fix a lot of problems, but I've never seen it fix issues clip-paths.