Scroll trigger and second frame is showing with clipped mask

[miel]

Hello everyone, I need help with my WordPress site on Elementor, specifically with animation using GSAP. What I'm trying to achieve with GSAP in WordPress Elementor is this: Imagine there's a first section with a video background and text overlay. As I scroll down, another section appears while the first section remains fixed in the viewport. As I continue scrolling, the second section gradually reveals itself. The first section's video remains visible, while the second section's background fills the screen. In the middle of the second section, there's a logo that is masked/clipped, allowing you to see through to the video of the first section. please see the video example from apple website https://www.apple.com/sg/ipad-pro/


or can visit this link to see the exact video   https://filebin.net/pw5ljr9fqsm1aupr

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

 

Finally you should have a look at this guide by @mvaneijgen regarding masks and clip-path:

 

[Nicolai Palmkvist]

@mielDid you find a solution? If not, I'd be happy to take a look at it. 



Nicolai Palmkvist