CSS slide-in with translateX property not staying in place

Hello, everyone ๐Ÿ‘‹. My problem with this is that the form is supposed to slide in from the left and stay in place so the user can add a new note. I am using the transform translateX property initially set to 100% to move the form to the right. Then when a button is clicked, the translateX property will be set to 0 which moves the form into view from the right to the left with a smooth animation. What I have tried but failed ๐Ÿ˜” : - setting the forms display to none initially and when the button is clicked, the display will be set to flex then a timeout of 600ms will change the translateX property from 100% to 0 The source code link is here : https://github.com/michTheBrandofficial/notes-app/blob/main/components/Form.tsx
GitHub
notes-app/components/Form.tsx at main ยท michTheBrandofficial/notes-...
A note taking app built with NixixJS. Contribute to michTheBrandofficial/notes-app development by creating an account on GitHub.
1 Reply
michTheBrandofficial
michTheBrandofficialโ€ข14mo ago
At the 17th second of the video, that's when the form stays in place.
Want results from more Discord servers?
Add your server