The Code

Code at CodeSandBox -- Demo

There is a lot of code in that above codesandbox, so I'll try to paste the relevant parts here:

Based on the series of drag / pan gesture's total X-direction delta, I'm doing:

// before setting transform and width, I set the transition // this way, there will be some tweening that occurs when I do // change the properties -- relevant to the specific open / // close situation if (this.isOpening) { this.content.style.transition = `width 0.1s linear, transform 0.1s linear`; } else { this.content.style.transition = `width 0.0s linear, transform 0.1s linear`; } this.content.style.setProperty("--dx", `${nextX}`); this.content.style.transform = `translateX(${nextX}px)`; this.resize(); // and then in that resize function let nextX = parseInt(this.content.style.getPropertyValue("--dx"), 10); this.content.style.setProperty("width", `${window.innerWidth - nextX}px`);

The Behavior I Want

When I drag the content to the right and left (either with the mouse, or a touch event), I expect that the right edge of the content will stick to the right edge of the window. I know that doing translateX by itself has super smooth animation, but animating width is tricky, as it causes reflows, harming performance.

The Behavior I'm seeing

When I drag the content to the right and left, the right edge of the content does not stick to the right edge of the window. This is partially do to the fact that I'm using dynamic css-transitions depending on the scenario. I have one transition in use for opening, and one for closing (revealing / hiding the sidebar). The reason for this is that if I don't have transitions at all, the animation feels jerky, and very unsmooth. The way it is now is better, but still not not ideal.

What I've tried

No CSS Transitions

Right side of the content sticks to the right side of the window, as I want

but the animation of the left side of the content following my finger is jittery (no tweening between emitted touch events, I think)

Add transition to the transform property

Left side of the content is buttery smooth

when revealing the sidebar, the right side of the content is pushed outside the viewport

when hiding the sidebar (dragging to the left), the right side of the content is pulled into the viewport, revealing the background element(s) / body

Add transition to the transform and width properties

had to be situational depending on opening / closing

the current way I'm doing things (as seen in the codesandbox, and in my actual code in my app)

translateX animation is less smooth

width animation still goes off screen a little bit, but it doesn't reveal the body / background

Other Notes

I'm currently using hammerjs to get touch events / gestures -- I don't have to use this library, so if there is a better way to achieve what I want, I'm all ears.