feat: Improve Preview Full Screen Modal Animation

[yatharth1706]

What does this PR do?

Made the animation look more natural when expanding the preview modal or shrinking it

Fixes # (issue)

Screen.Recording.2024-05-07.at.6.14.29.PM.mov

How should this be tested?

• Test A
• Test B

Checklist

Required

• Filled out the "How to test" section in this PR
• Read How we Code at Formbricks
• Self-reviewed my own code
• Commented on my code in hard-to-understand bits
• Ran pnpm build
• Checked for warnings, there are none
• Removed all console.logs
• Merged the latest changes from main onto my branch with git pull origin main
• My changes don't cause any responsiveness issues
• First PR at Formbricks? Please sign the CLA! Without it we wont be able to merge it 🙏

Appreciated

• If a UI change was made: Added a screen recording or screenshots to this PR
• Updated the Formbricks Docs if changes were necessary

[vercel]

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

A member of the Team first needs to authorize it.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
1 out of 2 committers have signed the CLA.

✅ pandeymangg
❌ yatharth1706
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[github-actions]

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

[jobenjada]

hey mate! Love to see you come back and get the job done 💪 :D

we'll look into it when the 2.0 is out! :)

[yatharth1706]

hey mate! Love to see you come back and get the job done 💪 :D

we'll look into it when the 2.0 is out! :)

Sure @jobenjada no worries. I was just learning more about animations and was tinkering with framer motion a lot in past few days. And i thought lets just give it a try again to improve the preview full screen animation. And hence i submitted a PR again.

[pandeymangg]

Hey! @yatharth1706 Thanks for opening the PR 😊 , could you please look into this? The preview survey is not visible in the full screen preview.

Screen.Recording.2024-05-15.at.9.32.27.AM.mov

[yatharth1706]

Yeah Sure, I will take a look at that in some time. Thanks

[yatharth1706]

Keeping this in draft version for now. Some strange behaviour happening with the modals inside preview screen when its maximized. Those are getting invisible. I will check that in some time.

[yatharth1706]

@pandeymangg i was checking the code. Inside preview modal, survey modal is getting dynamically added in the runtime. I believe that is causing some strange behaviour. Because for adding the animation i am using shared layouts of framer motion and in that i have to create the preview modal twice. One is the existing and second is the one which covers the whole screen when maximized.

So because of having two components and as our survey modal is dynamically added at the runtime, i believe that is causing some strange issues. Do you have any idea on how we can fix that and show the survey modal in the maximized component as well ?