IikkaR

Hey, Thank you very much! "the default <video> size in most browsers is 300x150, so -75px is exactly -50% of that height" This was something I just didn't notice or understand and from this I could've derive what was going on. I'll change my set-up so that the script will use gsap.set using the distance from the html tag instead of inline CSS. Thanks again I'll edit this message and let you know if it worked as I now think it will. EDIT: Works like a charm. Thanks again I marked your answer as a solution.

Hey, thanks for you answer If you re-check the html, you'll see that the translate(0, -50%) isn't hardcoded as inline. I added translate(0px, 0px) when I was trying to get around of this problem. So the problem is as follows: Unwanted translate(0, -50%) added if the translated element is on viewport onload. Steps for NOT producing the problem with earlier CodePen: Open the CodePen in new tab and in Full Page View Lower you window so that the red div isn't shown completely (attachment1) Refresh page You'll notice that the video doesn't have translate(0,-50%) as it shouldn't have (attachment2) and when scrolled, it is positioning as I want it (moving exactly between the two red divs, translateY between -75px and 75px). All good! Steps for reproducing the problem with earlier CodePen: Open the CodePen in new tab and in Full Page View Resize your window so it is normal height or atleast higher than the first red div. Refresh page You'll notice that the video isn't positioned the same way as previously. Now it has the translate(0, -50%) without it being intentionally added (attachment3). I hope with these you can understand what I'm trying to say here and tell me how to avoid this from happening or why this is supposed to happen so I understand it. Thanks again EDIT: I've tested with just Chrome 86.0.4240.193 and Safari 13.1.2, running on macOS Catalina 10.15.6 so I really don't have an idea if this is happening only with these or in all conditions.

Hey, I have problem when translating a video tag vertically and I hope that somebody could help! In the CodePen, the inline style has transform: translate(0%, -50%) translate3d(0px, XXpx, 0px). I don't really understand why the translate is added, I don't want the video to be translated -50% in Y-axis. I made a simplification from my WordPress site, where the admin can insert either video or image and select the animation direction, distance, make combinations etc and the conditions are way more complex in general. I noticed that if there's an image in the place of the video, everything works fine. And if the direction is only horizontal instead of vertical or vertical+horizontal, everything works fine. In addition, the problem only occurs if the video is in the viewport onload. If the viewport is lower than the red area, the problem doesn't occur. Any help appreciated! I've only just started using gsap and it seems really amazing!