Politechnica

Haha, true. But i sleep better when i know they can't break the functionality. I think i found the solution. As i suspected, the issue originated with the multiple "sticky" <section>s laying on top of each other. ScrollTrigger Events like onEnter etc. would then trigger for all <section>s in the viewport even when not really visible to the user. So i needed to get rid of the "sticky" for all non-visible <section>s. First change to CSS was to make the <section>s with the video "position:relative" by default. Only the "is-active" <section> would be set to "position:sticky". This worked perfectly, except i got some flickering of the background when the <section>s switched from "position:sticky" to "position:relative" (or vice versa). To mitigate this, i had to change the Start- and End-trigger of the ScrollTrigger, so that toggleClass would only be set when the "active" <section> has finished scrolling and is snapped to the top of the viewport. Instead of "start: top center+=15%, end: bottom center-=25%" I went with "start: top bottom, end: bottom top". This way the user doesn't get the flickering. I've forked the original codepen and entered the working code. See below. Codepen still doesn't like loading the videos, so a repeat "rerun" or browser refresh would be needed. https://codepen.io/Politechnica/pen/XWBRNXX I'll do some additional testing, then mark this issue as closed.

Hi GSAP community, So far it’s been smooth sailing with GSAP, but now I’m stuck with an experiment of mine. Here’s the breakdown of what I intend to do. I have a page with a lot of <section> elements. All of them are full height and width of the viewport as well as sticky to the top of the page, so we get a „card stacking“ situation when scrolling. The first scrollTrigger is used to snap-ing the sections, so you get that „magnetic“ effect. Then there is a scrollTrigger inside each of the <section>s that contains a video and it’s used to control the video as well as a small text-animation. Controlling the video here means, that if the <section> (with the video) is in the viewport (within the scrolling boundaries/start/stop positions) the video gets set to play. As soon as the user scrolls away from the video, the video and the animation get paused. When user scrolls back into the <section> the video and animation commence. I’ve set up toggleClass on the video scrollTrigger so I can check which <section> is currently active (might need for css etc…) So far everything works fine on mobile and desktop, but as soon as I resize the browser-window everything gets jumbled up. I don’t mean the html or css, but the scrollTrigger itself. When scrolling to the 3rd or 4th <section>, using Chrome Dev Tools, switch from desktop to mobile, you see the toggleClass on all <section> and the whole „video“-control and event-handling (onEnter etc.) breaks. This can be explained by the recalculation of scrollTrigger position due to the onresize-Event being triggered. And because the <section>s are sticky to the top of the page, they all are within viewport and the onEnter-Event is called which start all the videos up to the current one „visible“, that is on top of the pile/stack. Is there a way to remedy this behaviour? I think some more control of the „hidden“ <section> might be necessary. Maybe recheck all video-statuses on resize event? That would still leave the problem with the scroll positions of hidden <section>s being on top of each other… I've setup a codepen with the important code. the videos are loading pretty unreliably, so a reload/refresh/rerun of codepen might be necessary. Any hints/help would be greatly appreciated.