Hi team,
I need to create the following functionality, but I can't find a way to do it. I have reviewed all the documentation and videos, so I guess I have no other option but to ask for your support:
I am using Elementor and I have 7 sections on the Home page with the following sections:
#video1: It has a background video, an image, a title, and a short text. Full screen with 100vh and class .video-section #video2, #video3, #video4: They have a title and a short text. Full screen with 100vh #section5, #section6, #section7: Different content with texts, cards, calls to action, etc.
When the page loads, the #video1 section should play, and when scrolling, the content should move vertically until it disappears at the top. Then, in the same place, the #video2 section should appear with a fade effect, showing its background video and content in the same way; then #video3 and #video4 respectively, ending this functionality here.
#section5 and the following sections should enter the screen normally, following the scroll behavior right when #video4 ends.
I can't find a way to achieve the fade between the video sections and I've been trying for several days, so if you can help, I would be very grateful.
Thank you very much in advance.