Question

35

Framer-motion, delay rotateY while animating x

rated 0 times [ 40] [ 5] / answers: 1 / hits: 9057 / 4 Years ago, tue, march 24, 2020, 12:00:00

I'm working with Framer-motion and i'm trying to find a way to delay the the animation of rotateY while the x animates to a specific position then start the rotateY.

Is this possible in Framer motion ?

Example:

const variants = {

  flip: {

    rotateY: 0,

    x: -20,

    scale: 1,

    transition: {

      ease: easeInOut,

      duration: 1.2

    }

  },

  hidden: {

    rotateY: 180,

    x: 150,

    scale: 0.5,

    transition: {

      ease: easeInOut,

      duration: 1

    }

  }

};

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alli

Add To Favorites

Follow

Total Points: 409

Total Questions: 101

Total Answers: 105

Location: The Bahamas

Member since Tue, Apr 27, 2021

3 Years ago

alli questions

1 How do I add types to a Vite library build?

Sat, Apr 23, 22, 00:00, 2 Years ago

1 Discord.js Bot giveaway command : embedSent.reactions.get is not a function

Fri, May 29, 20, 00:00, 4 Years ago

1 Applying multiple filters to a table reactjs

Mon, May 18, 20, 00:00, 4 Years ago

1 Questions about useCallback hook and anonymous function

Fri, Jan 24, 20, 00:00, 4 Years ago

1 React js google map react-google-maps-api add StandaloneSearchBox

Mon, Jan 13, 20, 00:00, 4 Years ago

View All

answered 4 Years ago tylerdamiena · Accepted Answer

You can configure a transition per property. This allows you to add the necessary delay to rotateY:

const duration = 1.2;



const variants = {

  flip: {

    rotateY: 0,

    x: -20,

    scale: 1,

    transition: {

      ease: easeInOut,

      duration,

      rotateY: {

        delay: duration,

        duration

      }

    }

  },

  hidden: {

    rotateY: 180,

    x: 150,

    scale: 0.5,

    transition: {

      ease: easeInOut,

      duration,

      rotateY: {

        delay: duration,

        duration

      }

    }

  }

};

See this CodeSandbox.