#How can I set a custom transition to use a different animation for forwards and backwards?

4 messages · Page 1 of 1 (latest)

fast haven
#

I am trying to use a different animation for each of the 4 states: forwards.old, forwards.new, backwards.old, and backwards.new. But the transition only ever uses the values from 'forwards', and not the values for 'backwards'. What am I doing wrong?

here are my settings:

const timing = {
   old: 850,
   new: 650,
};

const next = {
   // old element that is leaving the DOM
   old: {
      name: "next-leave",
      duration: `${timing.old}ms`,
      easing: "cubic-bezier(0.165, 0.84, 0.44, 1)",
   },
   // new element that is entering the DOM
   new: {
      name: "next-enter",
      duration: `${timing.new}ms`,
      easing: "cubic-bezier(0.165, 0.84, 0.44, 1)",
   },
};
const prev = {
   // old element that is leaving the DOM
   old: {
      name: "prev-leave",
      duration: `${timing.old}ms`,
      easing: "cubic-bezier(0.165, 0.84, 0.44, 1)",
   },
   // new element that is entering the DOM
   new: {
      name: "prev-enter",
      duration: `${timing.new}ms`,
      easing: "cubic-bezier(0.165, 0.84, 0.44, 1)",
      // direction: "reverse",
   },
};

const customTransition = {
   forwards: next,
   backwards: prev,
};

and on the element: transition:animate={customTransition} transition:name="comicslide"

muted scaffoldBOT
#

Hi @fast haven. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Your approach to defining a custom transition object with different animations for each of the four states (forwards.old, forwards.new, backwards.old, backwards.new) is correct according to Astro's documented API for custom transitions. The structure you provided matches the expected interface for custom transitions:

const customTransition = {
   forwards: next,
   backwards: prev,
};

and each of next and prev has old and new animation definitions, as required.

However, if you are finding that only the forwards values are being used and not the backwards ones, this suggests that the navigation direction may not be detected as "backwards" by Astro in your use case. According to the documentation, Astro determines the direction (forwards or backwards) based on the navigation type (e.g., clicking a link vs. using the browser back button) and sets the data-astro-transition attribute accordingly. If navigation is always being interpreted as "forwards," only the forwards animation will be used.

What to check and try:

  1. Navigation Type:

    • Make sure you are actually triggering a backwards navigation (e.g., using the browser's back button or a link that triggers history traversal).
    • You can inspect the <html> element during navigation to see if data-astro-transition="back" is being set.

  2. Transition Name Uniqueness:

    • Ensure that transition:name="comicslide" is unique per element per page, as required by Astro for correct element matching see docs.

  3. Custom Transition Structure:

    • Your structure is correct and matches the example in the documentation for custom transitions see docs:
# 
   const customTransition = {
     forwards: anim,
     backwards: anim,
   };

You are using different objects for forwards and backwards, which is supported.

  1. Known Limitations:
    • The documentation does not mention any known issues with the backwards property not being respected, but if you are using a custom router or navigation method, ensure it integrates with Astro's client router and transition system.

Summary:
Your code is structured correctly. If only the forwards animation is being used, the likely cause is that navigation is not being detected as "backwards." Double-check how navigation is being triggered and verify the value of data-astro-transition during navigation. If the issue persists, it may be a bug or limitation not covered in the documentation.

For reference, see the section on Customizing Animations and Transition Directives.

If you continue to experience issues, consider opening an issue on the Astro repository with a minimal reproduction. The knowledge sources do not mention any additional configuration required for the backwards property to work.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: