kaidez

Hey everyone, I've been trying to find a solution for this through google, but I'm clearly not using the right keywords for it and couldn't find it. My apologies for that, as I'm positive someone else has had this same issue. Basically, every time I add a "from" animation to come from the right (so, for example, a positive x axis value, like "100" to "0"), it works great on the desktop but on the mobile, it causes white space (see image below). I really don't understand why. If the animations come from the left, there's no issue at all. My project is a NextJS project BTW. Also, FYI, I do not have any CSS code with animations, so that's not the issue (I read something similar to this on a different thread). Only Gsap is doing animations. P.S. I didn't include a codepen.io because this literally happens to me on every project, so I'm guessing there is just a simple mistake I'm making every time. The first time I used Gsap, I simply changed the animations so that they would never come from the right. I'm going to do the same thing now, but I'm really wondering what the right way to go about this is. Here is the image showing the extra white space on the right: Once all the animations have rendered, the white space disappears. Thank you in advance and apologies for asking what I'm pretty sure is a very basic question EDIT: Upon further inspection and testing, it seems to only happen when I apply the animation to something that is more than one "element". As in, if I apply to just a specific text element, no white space is formed. But if I apply it to a component that other elements within it, THEN the whitespace is caused