Next.js Discord

Discord Forum

React Experimental One-Way View Transitions within NextJS

Unanswered
Slovenský Kopov posted this in #help-forum
Open in Discord
Slovenský KopovOP
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?

4 Replies

Slovenský KopovOP
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>
  );
}
React animate on enter/exit:

https://react.dev/reference/react/ViewTransition#animating-an-element-on-enter

When I tried this, doing
 <ViewTransition name="Museformer" exit="none">
          <Image
            src={MuseImg}
            alt=""
            fill
            sizes="100vw"
            className="object-cover object-top" // trims bottom if needed
          />
        </ViewTransition>
Nothing changed
I am currently not getting any error logs associated with this issue, if that makes any difference