tganyan Posted September 15, 2021 Share Posted September 15, 2021 My issue is pretty straightforward. The linked animation isn't totally smooth; if you watch closely, it's got a subtle jerkiness to it and I have no idea why. I've seen a few posts similar to this but haven't found any solutions that seem to work for me, so any insight would be much appreciated. EDIT: I should also share that I found a post that mentions putting a super subtle rotationZ setting on the animation, but it didn't seem to impact anything when I attempted it (either it doesn't work for my issue, or I didn't understand the solution well enough and didn't implement it correctly) See the Pen YzQELEr by tganyan (@tganyan) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted September 15, 2021 Share Posted September 15, 2021 I just glanced at your code and I don't have a lot of time but here are some comments: You're animating "top", "left", "width", and "height", all of which browsers tend to snap to whole pixels. THAT is what makes it look jerky; it's not because the browser is struggling to keep up. I'd strongly recommend animating transforms like x, y, scaleX, and scaleY whenever you can. I realize you probably can't do that here for width/height due to the border-radius and you don't want things scaling in funky ways, but you could probably switch from left/top to x/y which allow sub-pixel rendering (they don't snap to whole pixels). GSAP automatically rounds px-based values on properties like top/left to improve performance (plus browsers do it internally anyway), but can set autoRound: false on your tweens. I doubt that will solve anything, though. You're using the old syntax. I'd strongly recommend updating. Like ease: Power3.easeOut is ease: "power3.out". And the duration should be in the vars object. See You can use selector text as the target, FYI. And you don't need to add "px" to most of your values. left: 50 is the same as left: "50px", with less typing. Good luck! 2 Link to comment Share on other sites More sharing options...
nico fonseca Posted September 16, 2021 Share Posted September 16, 2021 I made some example for you using clipPath 🙌 See the Pen d48c0e046673bbec4296bd9a692ae1d2 by nicofonseca (@nicofonseca) on CodePen 5 Link to comment Share on other sites More sharing options...
tganyan Posted September 16, 2021 Author Share Posted September 16, 2021 Thanks for the great responses. This at least gets me closer to what I need to do, although changing to x/y and scaling has introduced a new challenge. The intended effect of this is that the outside container shrinks and moves, but the image inside does not shrink or move with the container. The pen in my initial post shows this, linking it again below. I'm currently working with this in a separate pen (wanted to leave the initial one as-is so things don't get confusing in this thread). It seems that changing the values to scale and x/y is suddenly forcing the image to shrink and move with the container, which is definitely not the intended effect. Also, given Nico's very helpful response with the clip path, I should also mention that the container needs to have rounded corners so I think clip path is out (to my recollection you can't have border radius with clip paths, but keep me honest there). I'm continuing to work on it as time allows, but any tips of suggestions on this would be greatly appreciated! initial pen (with the jerkiness): working pen (attempting to get x/y and scale to play nicely): See the Pen YzQYQWm by tganyan (@tganyan) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted September 16, 2021 Share Posted September 16, 2021 Hi tganyan! I'm not seeing anything in your pens. Maybe use colored boxes instead of images for demo purposes. 25 minutes ago, tganyan said: Also, given Nico's very helpful response with the clip path, I should also mention that the container needs to have rounded corners so I think clip path is out (to me recollection you can't have border radius with clip paths, but keep me honest there). A clip path can be any shape. https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path 26 minutes ago, tganyan said: The intended effect of this is that the outside container shrinks and moves, but the image inside does not shrink or move with the banner. Not sure what you're going for because your demos aren't showing anything, but if you scale a parent and don't want the child to scale, you can counter scale it. Example using ExpoScaleEase. See the Pen XWgVaQd by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
tganyan Posted September 16, 2021 Author Share Posted September 16, 2021 I'm using images from placeholder.com and they're showing just fine from what I can see, not sure why you wouldn't be seeing anything. Are you literally not seeing anything at all (seems strange that neither Nico or Jack mentioned not being able to see my pen)? Because part of it is a container with a solid border, so you should at least be seeing that even if for some reason the placeholder images aren't showing. I'll look into the clip path reference you linked, I just remember having a really difficult time getting standard rounded corners to work with a clip path when I've tried it in the past. I've been trying to counter scale it and it's just being really counterintuitive and difficult to figure out, will just keep hammering at it. Link to comment Share on other sites More sharing options...
PointC Posted September 16, 2021 Share Posted September 16, 2021 19 minutes ago, OSUblake said: I'm not seeing anything in your pens. Maybe use colored boxes instead of images for demo purposes. 5 minutes ago, tganyan said: Are you literally not seeing anything at all (seems strange that neither Nico or Jack mentioned not being able to see my pen)? I'm not seeing anything either. 🤷♂️ Link to comment Share on other sites More sharing options...
tganyan Posted September 16, 2021 Author Share Posted September 16, 2021 I have updated the one with intended behavior to use a green box with text instead of the placeholder image, hopefully that helps the issue. Although, I'll reiterate that the placeholder image was not the only thing in there and there's a standard container with a solid 1px border, so it's very odd that you literally would not see anything at all. Are there any known pitfalls with codepen and this kind of thing that I may not be aware of? Some kind of setting I should have on the pen to ensure it shows here? I've posted this way in this forum several times and have never had an issue. EDIT: I've now updated both pens to only be using simple colored divs, no placeholder images or anything. Hopefully this helps (working pen has some wonky stuff going on right now and I'm only able to edit a little bit at a time today, so might be more useful to focus on the initial pen). 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