UI && CSS Tip! 🤙 You can create this morphing signup button component with View Transitions and linear() easing ⭐️ document.startViewTransition(() => { form.dataSet.state = "open" }) input { view-transition-name: form-input; } [data-state=open] input { width: auto; } ::view-transition-old(form-input), ::view-transition-new(form-input) { height: 100%; object-fit: none; object-position: left center; } The "trick" is making use of object-position to ensure that the images for the transitions of each element stay in the right place. The input needs to stay to the left. The button needs to stay to the right 😎 And maintaining the desired aspect-ratio whilst the transition happens is key to making the transition feel "right" The form itself has a view transition name declaration so you give the illusion of animating the container ✨ The button doesn't have a background. The fact is that you see the form the whole time. You transition the forms content and see that happen with a nice bounce. That's possible with the linear() easing function. The ease used was this one 👇 :root { --ease: linear( 0, 0.0039, 0.0157, 0.0352, 0.0625 9.09%, 0.1407, 0.25, 0.3908, 0.5625, 0.7654, 1, 0.8907, 0.8125 45.45%, 0.7852, 0.7657, 0.7539, 0.75, 0.7539, 0.7657, 0.7852, 0.8125 63.64%, 0.8905, 1 72.73%, 0.9727, 0.9532, 0.9414, 0.9375, 0.9414, 0.9531, 0.9726, 1, 0.9883, 0.9844, 0.9883, 1 ); } Looks complex but they are a write once and forget kinda thing 😅 Oh. And if you wanna try this out in Firefox, etc. You can! Where View Transitions aren't supported, I've put some GSAP in the demo so you can play with it 🤙 Let me know what you think of doing little videos like this 🙏 @CodePen link below! 👇