Need help on Transition on this site

I have an interaction on a link with “Already signup? Login”. When a user clicks it hides the signup form and shows the login form. My issue here is that this change is not happening in a smooth version. I want to add a transition to this. But I have been having issues with it.

Can someone kindly help?

This is the public link: https://webflow.com/design/ghm?preview=37faf350a1884ce31710eccfb3bd8820

Secondly how possible it to change the “Already signup? Login” to read “Signup to login” when it is in the login state.

Will appreciate if someone help me look at this issue. Thanks

@topelovely Try this for show n hide interaction for your form

Details for First Click:

Details for Second Click:

Hope it helps

Cheers

Hi appreciated. but it didnt work for me.

Hi @topelovely I currently discovered a problem to get such a result, although things are fine in preview mode but it’s gone wrong after publish, it is wrong behavior obviously BUT if we set fix Height some pixels it work well.

So, try to set 400px for ‘Details on Second Click’ instead auto.

Thanks once again Pastibawa for looking into this. Apparently am frustrated. I noticed when user focus on the form field the view switches. Except there are better approach out there to achieve this interaction thing. For me it aint working. So I went back to the old point and shoot approach (Link to a separate page. Not the best. But it works)

For clarity this is what I want to achieve: I have a signup form and a login form. The signup form is hidden on load. The user is first presented with a login form. A link is also provided to toggle between the signup form and login form. If the user clicks on the toggle, the login form is hidden and the signup form is displayed and vice versa. Simple right? But have not been able to achieve this.

Challenge: While testing, when a user focus on the form field the state changes which shouldn’t be. The state should only change when the toggle link is clicked not when the user focuses on the form field.

How can this be achieved with webflow? Please help.

@topelovely I’ve made this for you. Hope it helps you better. http://livehelper.webflow.com/#signuploginformswitch

Public link is Webflow - livehelper

Cheers

Thanks so much. I was able to integrate it beautifully. But I have an issue. The transition is clunky which unlike your that was smooth. Any pointers. Thanks Pastibawa. Your contribution is exceptional.

@topelovely I’m not sure with ‘clunky’ you have mentioned :smiley: I need to have a look on it but one thing I have noticed that to get smooth result for width/height animation on Div, we must not have padding on that Div.