feat(product tours): add animation toggle to banners (#47980)

## Problem

banners cause a pretty jarring layout shift when they appear

<!-- Who are we building for, what are their needs, why is this important? -->

<!-- Does this fix an issue? Uncomment the line below with the issue ID to automatically close it when merged -->

<!-- Closes #ISSUE_ID -->

## Changes

adds an animation toggle for banners :)

| normal sticky/static banners | custom injection banners |
| --- | --- |
| [banner-animations.mp4 <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.com/user-attachments/thumbnails/ea020f88-2a9b-4dd5-9dae-34441ee4bd03.mp4" />](https://app.graphite.com/user-attachments/video/ea020f88-2a9b-4dd5-9dae-34441ee4bd03.mp4)<br> | [injected-banner-animation.mp4 <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.com/user-attachments/thumbnails/e54d2862-44de-400a-966d-c4eef45c232d.mp4" />](https://app.graphite.com/user-attachments/video/e54d2862-44de-400a-966d-c4eef45c232d.mp4)<br> |

depends on PostHog/posthog-js#3098

technically supports a custom animation duration, but only exposing it as a toggle right now -- don't wanna clutter the UI until we have to 😛

<!-- If there are frontend changes, please include screenshots. -->

<!-- If a reference design was involved, include a link to the relevant Figma frame! -->

## How did you test this code?

<!-- Briefly describe the steps you took. -->

<!-- Include automated tests if possible, otherwise describe the manual testing routine. -->

<!-- Docs reminder: If this change requires updated docs, please do that! Engineers are the primary people responsible for their documentation. 🙌 -->

👉 _Stay up-to-date with_ [_PostHog coding conventions_](https://posthog.com/docs/contribute/coding-conventions) _for a smoother review._

## Publish to changelog?

<!-- For features only -->

<!-- If publishing, you must provide changelog details in the #changelog Slack channel. You will receive a follow-up PR comment or notification. -->

<!-- If not, write "no" or "do not publish to changelog" to explicitly opt-out of posting to #changelog. Removing this entire section will not prevent posting. -->

Author: adboio

frontend/src/scenes/product-tours/editor/BannerSettingsPanel.tsx

@@ -1,6 +1,6 @@
 import { useActions, useValues } from 'kea'
 
-import { LemonInput, LemonSegmentedButton, LemonSelect } from '@posthog/lemon-ui'
+import { LemonInput, LemonSegmentedButton, LemonSelect, LemonSwitch, Tooltip } from '@posthog/lemon-ui'
 
 import { ProductTourBannerConfig } from '~/types'
 
@@ -20,6 +20,7 @@ export function BannerSettingsPanel({ tourId }: BannerSettingsPanelProps): JSX.E
 
     const behavior = step.bannerConfig?.behavior ?? 'sticky'
     const actionType = step.bannerConfig?.action?.type ?? 'none'
+    const animateIn = (step.bannerConfig?.animation?.duration ?? 0) > 0
 
     const updateBannerConfig = (updates: Partial<ProductTourBannerConfig>): void => {
         updateSelectedStep({
@@ -45,7 +46,7 @@ export function BannerSettingsPanel({ tourId }: BannerSettingsPanelProps): JSX.E
         <div className="py-3 px-4">
             <div className="flex gap-10">
                 <div className="flex-1 min-w-0 space-y-4">
-                    <div className="flex items-center justify-between gap-4">
+                    <div className="flex flex-col items-start gap-2">
                         <div>
                             <div className="font-medium text-sm">Position</div>
                             <div className="text-muted text-xs">
@@ -81,6 +82,20 @@ export function BannerSettingsPanel({ tourId }: BannerSettingsPanelProps): JSX.E
                             fullWidth
                         />
                     )}
+                    <div className="flex items-center gap-2">
+                        <Tooltip title="Banner slides in from the top of the page with a brief animation. When disabled, the banner will appear suddenly after page load, potentially causing a layout shift.">
+                            <div className="font-medium text-sm">Animate in</div>
+                        </Tooltip>
+                        <LemonSwitch
+                            data-attr="product-tours-banner-animation-toggle"
+                            checked={animateIn}
+                            onChange={(checked) =>
+                                updateBannerConfig({
+                                    animation: { duration: checked ? 300 : 0 },
+                                })
+                            }
+                        />
+                    </div>
                 </div>
 
                 <div className="flex-1 min-w-0 space-y-3">

frontend/src/scenes/product-tours/productToursLogic.ts

@@ -184,6 +184,9 @@ function createDefaultBannerContent(): ProductTourContent {
                     action: {
                         type: 'none',
                     },
+                    animation: {
+                        duration: 300,
+                    },
                 },
             },
         ],

frontend/src/types.ts

@@ -3377,6 +3377,9 @@ export interface ProductTourBannerConfig {
         link?: string
         tourId?: string
     }
+    animation?: {
+        duration: number
+    }
 }
 
 export type ProductTourButtonAction = 'dismiss' | 'link' | 'next_step' | 'previous_step' | 'trigger_tour'