Hide/Show Help - Wrong form is displayed first

I am trying to swap out a login form with a forgotten password form and vice versa using two links ‘Forgotten Password?’ and ‘Back to Log In’.

I have got it to work but for some reason the Forgotton Password form displays first and not the login form.

Can anyone help me out please?

I am working on the login page of this project.


Here is my public share link: LINK

@PixelGeek @Waldo

Are you able to help with this one please chaps? It should be fairly straight forward but I cannot get my head around it.

Rob

Great work on that @roblewi5! For a second I thought the home page was just an interaction but it was switching pages.

Building out the log in ➞ sign up flow interaction can be tricky!

From what I could tell, you may have the interaction switched or at least the initial states swapped around or perhaps missing (since you defined an initial state in both the first and second click rather than just once per an element):

It’s been a while since I’ve built out a log in ➞ sign up flow interaction in Webflow (last done with Legacy interactions): Sign-Up/Login Concept #MadeInWebflow by Waldo Broodrÿk on Dribbble

Would an interactions 2.0 interaction demo be helpful?

But essentially it’s critical to set the initial state correctly without conflicts or doubling up on a setting. This can even be done using the tabs component if you’d like.

I hope that this is helpful :bowing_man: please let me know if you have any questions!

Hi @Waldo,

Thanks for getting back to me. Yes the home page is where I had to deliver the screens and used a regular link. I would have prefered to send one page but didn’t work it out in time.

A tutorial would be great for the new IX2.0. I’m really having trouble understanding even the basics - as you said the element has an intial state (on the page) then an initial state (in the interaction) and an initial state (on 2nd click).

I haven’t played around much with the new interactions but this is my biggest hurdle. It would be great to get a transition effect on the hide/show like you have done in the previous tutorial you made. It looks great!

Thanks for you help.

Rob

Hi @roblewi5

Have you worked through these yet? An intro to doing things in IX2: Interactions & animations course | Webflow University

You will also find @PixelGeek workshops from #96 onwards useful as that was (i think ) when he first demo’d it - Iphone page animation in IX1 and the IX2, and then has used it on a number of them since…

#101 is an overview of IX2: https://webflow.com/workshops-archive

Hope that helps

Stu

Hi @StuM,

Yes I have - I was following ‘Show and hide elements on click’ which was similar interaction but still couldn’t grasp the initial state situation.

I have over-complicated things by setting an initial state everywhere.

I need to use interactions more to get used to them - thought they would be far more intuitive than they are - either that or i’m losing my edge!

Rob