IikkaR Posted November 14, 2020 Share Posted November 14, 2020 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! See the Pen GRqzBZY by iikka-ruotsalainen (@iikka-ruotsalainen) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted November 15, 2020 Share Posted November 15, 2020 First of all, welcome to the world of GSAP and these forums. I didn't really understand your question - you've hard-coded that -50% translate inline. Are you asking why GSAP uses a translate3d() during the animation? That's to boost performance by getting the browser to layerize (GPU-accelerate) the element. Can you be very specific about how to reproduce the problem in your CodePen? I didn't see any issues whatsoever. I tried making my window small and refreshing the page so that the video was off-screen, but it worked fine. Is there a particular browser that's causing problems for you? Again, I can't find any problems in the CodePen you provided but perhaps I'm missing something. 1 Link to comment Share on other sites More sharing options...
IikkaR Posted November 15, 2020 Author Share Posted November 15, 2020 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. Link to comment Share on other sites More sharing options...
Solution GreenSock Posted November 15, 2020 Solution Share Posted November 15, 2020 The short answer: ALWAYS set all your transform-related values via GSAP directly. Don't do a mix of CSS and GSAP. It's one of the most common mistakes - see: Explanation: You set a translateY in your CSS of -75px and the default <video> size in most browsers is 300x150, so -75px is exactly -50% of that height. When GSAP parses the current transforms on an element, the browser always reports them as a matrix() or matrix3d() which is pixel-based but it's extremely common for people to use values like -50% which is why GSAP does its best to sense that condition. If it sees that the current value is precisely 50% (or -50%), it will assume you meant it to be a percentage. Again, it's doing its best to discern things when you haven't set them properly via GSAP directly. So if you simply gsap.set() your transform-related values directly, it'll ensure that GSAP knows exactly what you meant and set those accordingly. So in your case, it could be: gsap.set("video.parallax", {yPercent: 0, y: -75}); It's fine to set them initially via CSS also (to avoid any flash of unstyled content), but definitely set transforms via GSAP on anything you're animating with GSAP. Does that resolve things for you? 3 Link to comment Share on other sites More sharing options...
IikkaR Posted November 16, 2020 Author Share Posted November 16, 2020 (edited) 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. Edited November 16, 2020 by IikkaR Confirmed that everything works Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now