Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
IikkaR

Extra translate(0, -50%) added

Go to solution Solved by GreenSock,

Recommended Posts

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

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. 

  • Like 1
Link to comment
Share on other sites

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:

  1. Open the CodePen in new tab and in Full Page View
  2. Lower you window so that the red div isn't shown completely (attachment1)
  3. Refresh page
  4. 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).
  5. All good!

 

Steps for reproducing the problem with earlier CodePen:

  1. Open the CodePen in new tab and in Full Page View
  2. Resize your window so it is normal height or atleast higher than the first red div.
  3. Refresh page
  4. 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).
  5. :(

 

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.

 

attachment1.png

attachment2.png

attachment3.png

Link to comment
Share on other sites

  • Solution

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? 

  • Like 3
Link to comment
Share on other sites

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 by IikkaR
Confirmed that everything works
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×