I’m building a ChatGPT app using the ChatGPT Apps SDK with an MCP server. My widget uses window.openai.requestDisplayMode({ mode: ‘fullscreen’ }) to expand to fullscreen mode.
The display mode change works correctly, but I’m trying to achieve the smooth scale/opacity animation that published Apps SDK widgets (like Zillow and AllTrails) have when transitioning between inline and fullscreen.
When inspecting their widget iframe in DevTools, I noticed ChatGPT adds a CSS property like:
v”iew-transition-name: pinned-kanzi-widget”
My widget (running in dev mode) doesn’t have this property added to its iframe, resulting in an instant layout change rather than the smooth animated transition.
I’ve followed the patterns from the openai-apps-sdk-examples repo:
- Using useOpenAiGlobal(“displayMode”) to read display mode
- Using hidden CSS classes to toggle layouts (like the Pizzaz example)
- Using max-height: inherit on the container
Questions:
- Is the CSS View Transitions animation only enabled for production/approved apps, not dev mode?
- Is there widget metadata (in _meta) that enables this transition?
- Are there any requirements for widgets to receive the animated fullscreen transition?
Thanks!