Someone is attempting to deploy a commit to the formbricks Team on Vercel.

A member of the Team first needs to authorize it.

Thank you for following the naming conventions for pull request titles! 🙏

Hey @yatharth1706 - thanks a lot for picking this up and welcome to the FormTribe 🔥

Technically, it works. However, it doesn't feel slick, it actually feels a bit broken 🫠

It would help already if:

• The blur and dark overlay is not 'loading' from left to right but fading in
• The window is not 50% width at first an then jumps to full-width but opens in full-width right away.

What we're actually looking for is the window to smoothly scale up and down with the button 🤓

Wanna rework your submission?

Sure, I will try to work on points you suggested and improve the animation as well

Hey @yatharth1706 - thanks a lot for picking this up and welcome to the FormTribe 🔥

Technically, it works. However, it doesn't feel slick, it actually feels a bit broken 🫠

It would help already if:

• The blur and dark overlay is not 'loading' from left to right but fading in
• The window is not 50% width at first an then jumps to full-width but opens in full-width right away.

What we're actually looking for is the window to smoothly scale up and down with the button 🤓

Wanna rework your submission?

I improved animation and background blur. Is it looking fine now ?

Hey! This is better but not ready to merge yet.

Please fix the following:

1. The scale up animation is always rendering when the preview is rendering ( on the template page, when the survey editor loads etc). This looks like a bug. If it was fading instead of scaling up from the top left to the right, it would be ok. This would looks smoother overall, as well when scaling the window up.

2. There is a note in the console:

3. The margin right got lost for the Refresh button and the container is a bit shorter than before so we're losing precious screen space:

I also tried to play around with it and get GPT to suggest a solution where it actually looks like the preview window is growing to full screen instead of a new window being opened. I think the issue is that we're toggling between absolute and relative positioning. Can we find a way where we stick with absolute positoning?

Or why do you think is it not looking like the same window grows to fill the screen?

You can send me a message on Discord to discuss this if you like :)

Thanks!!

Ok @jobenjada ,

I will work on all these points you suggested, also for animation, i will think more about it how we can make sure same window grows to full screen instead of new window coming from left to right.

Will analyse this more

Hi @jobenjada , I have fixed all the points you suggested.

1. Fixed first render animation issue
2. Fixed margin right and border radius issue (this one was existing issue can be visible in actual production website though, but fixed it in this pr). Container height also fixed.
3. Note in the console fixed
4. Improved animation so that it looks natural. Tried my best. Do let me know if it needs more improvement. Will analyse it more.

Attaching a small demo of how it looks now

Thanks a lot for your presistence, really appreciated :))

This is pretty good! I know someone who could help actually, let me reach out and follow up with you!

https://twitter.com/formbricks/status/1709432803606077691

Thanks a lot for your presistence, really appreciated :))

This is pretty good! I know someone who could help actually, let me reach out and follow up with you!

https://twitter.com/formbricks/status/1709432803606077691

Sure @jobenjada , Although I will try again in the evening to improve this more. Will analyse it again how to make animation look more slick and natural.

Hi @jobenjada , I was trying to improve the animation. I am attaching two demo videos. Do let me know which one do you prefer. Although they might not be perfect, but want to know what you think and which one is good from user perspective, so that i will improve that one.

In this, i added a little delay while changing position from relative to fixed, so that it looks like the screen is becoming full screen from its original position, as you can see in demo. And it does not appear like a new window opening. Only one problem in this is that while changing from relative to fixed, its not smooth. I am trying to figure out any way to make that smooth, but stuck in that.

In this i am not adding any delay between fixed and relative position, so it might look like a new window is opening although this one is smoother. Only drawback i guess its not looking natural and looking like a new window is opening

Do let me know what you think. I will try to still improve it.

The first one is verrrry close already! Any idea, why its not animating the scale up? I think you're 95% there 🫶

Great work! You're a strong candidate for the +500 points award as Pixel Picasso :D

The first one is verrrry close already! Any idea, why its not animating the scale up? I think you're 95% there 🫶

Great work! You're a strong candidate for the +500 points award as Pixel Picasso :D

Yes, in the first one, i have added a little delay of around 300ms. After that i am making it position fixed, so that it covers the whole screen. From position relative to fixed when its going, its not animating. Will check framer motion docs for this, if i can find anything for this scenario

Hi @jobenjada , I tried making it look more natural. But still its not 100% smooth. But i would request you to once use this locally so that you can get a feel of how maximize is working currently and what is your user experience.

I tried finding some solution in framer motion. It said to use layout keyword for change in position layouts, but its not giving me super smooth animation. Let me know if you have any ideas.

@yatharth1706 I think its fine, from the last 2 options you presented, please commit the first one and resolve the merge conflicts. Happy to get it merged then! :)

Thanks for your good work! Really appreciated 🙏

Hi @jobenjada, i have resolved the merge conflicts. Can you review this. Also if you could check the animation manually, that would be great. I have made a slight change as there was width and height inconsistency with the actual production app. Also decreased the bottom margin a little when maximizing as it was getting cut with top nav bar when its in relative state.

Do let me know if this works fine.

@yatharth1706 thanks a lot!! :)

Welcome @jobenjada

And thanks for merging this. Also, it might not be 100% according to what you would have wanted. But i will rework on it in future and improve the animation for sure.