Transitions

Astonish allows slide transitions, built using the well known Framer Motion library, comes with a list of built-in transitions, those are:

• SlideToLeftTransition
• SlideToRightTransition
• SlideToBottomTransition
• SlideToTopTransition
• FadeInTransition

You can also create your custom transition using our createTransition function

import { Astonish, Slide, Preview, createTransition } from "astonish";

const transition = createTransition({
  type: "spring", // framer-motion transition type
  duration: 3, // 3 seconds
  properties: {
    opacity: {
      from: 0,
      to: 1,
    },
  },
});

function Presentation() {
  return (
    <Astonish defaultSlideTransition={transition} slideSx={SlideStyles}>
      <Slide sx={{ background: "hotpink" }}>I'm the first slide!</Slide>

      <Slide sx={{ background: "royalblue" }}>I'm the second!</Slide>

      <Slide sx={{ background: "limegreen" }}>I'm the third!</Slide>

      <Preview />
    </Astonish>
  );
}

export default Presentation;

const SlideStyles = {
  display: "flex",
  flexDirection: "column",
  justifyContent: "center",
  alignItems: "center",
  fontSize: "32px",
  fontFamily: "Arial, Helvetica, Ubuntu, sans-serif",
};