feat(product tours): add banner animations

Author: adboio

.changeset/wet-hands-roll.md

@@ -0,0 +1,5 @@
+---
+'posthog-js': patch
+---
+
+add animation option for tour banners

packages/browser/src/extensions/product-tours/components/ProductTourBanner.tsx

@@ -56,7 +56,17 @@ function StaticWrapper({ class: className, children }: BannerWrapperProps): h.JS
     return <div class={className}>{children}</div>
 }
 
-export function ProductTourBanner({
+export function ProductTourBanner(props: ProductTourBannerProps) {
+    return (
+        <div class="ph-tour-banner-wrapper">
+            <div class="ph-tour-banner-slide">
+                <ProductTourBannerInner {...props} />
+            </div>
+        </div>
+    )
+}
+
+function ProductTourBannerInner({
     step,
     onDismiss,
     onActionClick,

packages/browser/src/extensions/product-tours/product-tour.css

@@ -560,6 +560,25 @@
 }
 
 /* Banner styles */
+@keyframes ph-tour-banner-slide-in {
+    from {
+        grid-template-rows: 0fr;
+    }
+    to {
+        grid-template-rows: 1fr;
+    }
+}
+
+.ph-tour-banner-wrapper {
+    display: grid;
+    animation: ph-tour-banner-slide-in var(--ph-tour-banner-animation-duration, 300ms) ease-out forwards;
+}
+
+.ph-tour-banner-slide {
+    overflow: hidden;
+    min-height: 0;
+}
+
 .ph-tour-banner {
     display: flex;
     align-items: center;

packages/browser/src/extensions/product-tours/product-tours.tsx

@@ -28,7 +28,7 @@ import { createLogger } from '../../utils/logger'
 import { document as _document, window as _window } from '../../utils/globals'
 import { localStore, sessionStore } from '../../storage'
 import { addEventListener } from '../../utils'
-import { isNull, SurveyMatchType } from '@posthog/core'
+import { isNull, isUndefined, SurveyMatchType } from '@posthog/core'
 import { propertyComparisons } from '../../utils/property-utils'
 import {
     TOUR_SHOWN_KEY_PREFIX,
@@ -151,6 +151,10 @@ function retrieveBannerShadow(
 
     addProductTourCSSVariablesToElement(div, tour.appearance)
 
+    if (!isUndefined(bannerConfig?.animation?.duration)) {
+        div.style.setProperty('--ph-tour-banner-animation-duration', `${bannerConfig.animation.duration}ms`)
+    }
+
     const shadow = div.attachShadow({ mode: 'open' })
 
     const stylesheet = getProductTourStylesheet()

packages/browser/src/posthog-product-tours-types.ts

@@ -22,6 +22,9 @@ export interface ProductTourBannerConfig {
         link?: string
         tourId?: string
     }
+    animation?: {
+        duration?: number
+    }
 }
 
 /** Button actions available on modal steps */

playground/nextjs/pages/product-tours.tsx

@@ -53,6 +53,8 @@ export default function ProductTours() {
 
     return (
         <div className="p-6 max-w-4xl mx-auto">
+            <div id="playground-banner-container"></div>
+
             <h1 className="text-2xl font-bold mb-6">Product Tours Playground</h1>
 
             {/* Tour Controls */}