Any workarounds for Shared Element Transitions (SET) on Web?

[Tehnix]

Really loving the new SET on iOS, but since I'm deploying to Web also via Expo and React Native Web, I'm sorta missing a bit of functionality for that.

I couldn't find any information around plans for supporting Web so wanted to check if that's a goal, or if there are at least any workarounds possible?

I know Framer Motion supports SET but I don't think that it's possible for me to use that library on React Native.

What are people currently doing? Just having no transition animations at all on Web?

[MatiPl01]

I think that SETs were mainly intended for mobile devices so only iOS and Android is supported. We haven't planned to add web support yet. We also haven't made the native implementation production-ready yet, so the web implementation won't likely be added before SETs become stable om iOS and Android.

I know Framer Motion supports SET but I don't think that it's possible for me to use that library on React Native.

Have you tried using it? You should be able to have access to all web-specific APIs and even to use div element tag within React component (e.g. mixing RN View with HTML div should work on the web). Please give it a try.

[Tehnix]

Hmm, I couldn't get that to work initially, but then found out that if I set dismissTo to true on the Link component that navigates between the pages that have the shared element transitions via Framer Motion, it then worked.

import { Link } from 'expo-router';

function Page() {
  return (<>
    <Link href="/other-page" dismissTo>This works</Link>
    <Link href="/other-page">This doesn't work</Link>
  </>);
}

I might have a problem somewhere in my Stack routing on Web, the pages also flash slightly when navigating between them 🤔

A bit more detailed example for future Googlers:

1. Use Link to navigate between pages and have dismissTo set to true on Web as minimum
2. Create two versions your component that needs to have the shared transition, one for native and one for web
3. Use Framer Motion for Web and react-native-reanimated for Native

Page first-page.tsx:

import { View, Platform } from 'react-native';
import { Link } from 'expo-router';

import { Logo } from '@/components/logo';

function Page() {
  return (
    <View>
      {/* Transition to larger logo size. */}
      <LogoIcon sharedTransitionTag="logo" size={400} />
      <Link href="/other-page" dismissTo={Platform.OS === 'web'}>Go to other page</Link>
    </View>
  );
}

Page other-page.tsx:

import { View, Platform } from 'react-native';
import { Link } from 'expo-router';

import { Logo } from '@/components/logo';

function Page() {
  return (
    <View>
      {/* Transition to smaller logo size. */}
      <LogoIcon sharedTransitionTag="logo" size={200} />
      <Link href="/first-page" dismissTo={Platform.OS === 'web'}>Go to first page</Link>
    </View>
  );
}

And then the logo component that supports shared element transitions:

Native version logo.tsx:

import { Image } from 'expo-image';
import Animated from 'react-native-reanimated';

export function Logo({ sharedTransitionTag, size = 200 }: {
  readonly sharedTransitionTag: string;
  readonly size: number;
}) {
  return (
    <Animated.Image
      sharedTransitionTag={sharedTransitionTag}
      source={require('@/assets/images/logo.png')}
      style={{ width: size, height: size }}
    />
  );
}

Web version logo.web.tsx:

import { Image } from 'expo-image';
import { motion } from 'motion/react';

export function Logo({ sharedTransitionTag, size = 200 }: {
  readonly sharedTransitionTag: string;
  readonly size: number;
}) {
  return (
    <motion.img
      layoutId={sharedTransitionTag}
      src={require('@/assets/images/logo.png')}
      style={{ width: size, height: size }}
    />
  );
}

[MatiPl01]

Thanks for sharing the details!

I might have a problem somewhere in my Stack routing on Web, the pages also flash slightly when navigating between them 🤔

Mhm, I don't know how Framer Motion works under the hood, but maybe there is an issue with the timing, when the animation is triggered in relation to the navigation event - it may be triggered too late.