Jump to content
Search Community

Fairly simple animation is jerky

tganyan test
Moderator Tag

Recommended Posts

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

I just glanced at your code and I don't have a lot of time but here are some comments:

  1. 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. 
  2. 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
  3. 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!

  • Like 2
Link to comment
Share on other sites

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

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

 

  • Like 3
Link to comment
Share on other sites

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

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

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

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.
×
×
  • Create New...