#React Experimental One-Way View Transitions within NextJS

1 messages · Page 1 of 1 (latest)

fair anvil
#

I have tried all sorts of ways to get this to work, referencing NextJS and React docs, but nothing has worked. I keep getting the same animation in reverse. Have you had this problem if you've used the view transitions API before?

pale craneBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

fair anvil
#

Here is my from component (base)

"use client";

import React, { unstable_ViewTransition as ViewTransition } from "react";
import Image, { StaticImageData } from "next/image";
import Link from "next/link";
import { memo } from "react";

import Caption from "./Caption";

type CardProps = {
  href: string;
  imgSrc: StaticImageData;
  imgAlt?: string;
  title: string;
  caption: string;
  className?: string;
} & React.AnchorHTMLAttributes<HTMLAnchorElement>;

function Card({
  href,
  imgSrc,
  imgAlt = "",
  title,
  caption,
  className = "",
  ...props
}: CardProps) {
  return (
    <Link
      href={href}
      className={`w-[calc(100%-3rem)] pointer-events-auto group relative overflow-hidden rounded-md shadow-lg bg-neutral-800 ${className}`}
      {...props}
    >
      <div className="relative w-full aspect-[4/3]">
        <ViewTransition name={title}>
          <Image
            src={imgSrc}
            alt={imgAlt}
            fill
            sizes="100vw"
            className="object-cover transition-transform duration-300"
            priority
          />
        </ViewTransition>
      </div>

      <div className="p-4">
        <ViewTransition name={title + 1}>
          <h3 className="text-base font-semibold text-white">{title}</h3>
          <Caption className="mt-1">{caption}</Caption>
        </ViewTransition>
      </div>
    </Link>
  );
}

export default memo(Card);
#

and to component

import Image from "next/image";

import { unstable_ViewTransition as ViewTransition } from "react";

import MuseImg from "@/assets/images/museformer.jpg";

export default function Museformer() {
  return (
    <div className="flex flex-col bg-neutral-900 z-50">
      <div className="relative w-full h-[80vh]">
        <ViewTransition name="Museformer">
          <Image
            src={MuseImg}
            alt=""
            fill
            sizes="100vw"
            className="object-cover object-top" // trims bottom if needed
          />
        </ViewTransition>
      </div>

      <div className="flex flex-row p-12 min-h-72">
        <div className="flex flex-col">
          <ViewTransition name={"Museformer" + 1}>
            <div className="text-left text-5xl">Museformer</div>
            <div className="text-xl text-neutral-700 font-[300]">
              Music Analysis Tool
            </div>
          </ViewTransition>
        </div>
      </div>
    </div>
  );
}
#

I am currently not getting any error logs associated with this issue, if that makes any difference