How can I animate (or transition) dom reordering with framer motion? I've read about a technique called the FLIP (mentioned here but I am unsure how I would go about implementing this into framer motion.
you can achieve by adding layout prop to your motion component. Make sure you use version of framer-motion 2.0 and above, because below that it used to be layoutTransition={transition object}.
See the working example here https://codesandbox.io/s/framer-motion-reorder-animation-forked-4jbqh?file=/src/Example.tsx
Related
I would like to use carbon design motion in a react project.
I've been following the guidelines here:
https://github.com/carbon-design-system/carbon/tree/v10/packages/motion
I've added this line into my codesandbox (my sandbox linked here: https://codesandbox.io/s/carbon-components-react-forked-3ul1pt?file=/src/index.js:0-514)
const { easings, motion } = require('#carbon/motion');
but not sure now how to use 'easings' or 'motion' to animate a component/
How could i use carbon design to make the buttons in the codesandbox above fade in or out?
(or do any animated transition for that matter)
thanks
The motion() function will return a cubic bezier string that you can provide to css-in-js styling to control the rate of motion for your animations. This can be used for any property that is animatable. Similarly you can specify this in sass if you're using sass for writing your styles.
For fading a button you would place opacity: 0 on the component by default, and then toggle a secondary class/style with opacity: 1. This would transition the component from transparent to opaque when the class/style is applied and vice-versa. Alongside the opacity, you can specify the cubic bezier value.
Here's a good article on the topic that might be helpful to read more about how to use these properties.
I'm making a dropdown menu and I wanted to create an animation using framer motion. The problem I encounered is that when the animation starts the component hides under the other components on the website until the animation ends. I have seen that you can specify zIndex property but it doesn't seem to work. Did anyone have a similar problem? Any solution?
I'm having an issue using the framer-motion AnimatePresence component.
While switching between slides, the slide's layout "shrinks" for a moment before extracting back to its desired dimensions. After some debugging, I'm pretty sure this is caused because AnimatePresence is rendering both slides at the same time for a tiny moment, however I didn't manage to get this fixed.
Here is a sandbox demonstrating the issue.
If you don't want to use a beta feature, you could just put a delay on the exit variant.
Also, might want to position the slide absolute.
https://codesandbox.io/s/infallible-ganguly-38mmc
Using the new beta exitBeforeEnter prop did the trick:
<AnimatePresence exitBeforeEnter>
...
</AnimatePresence>
I have been breaking my head trying to figure out how to accomplish something that I figured would be quite simple (I know...)
Goal is for a very minimal, and reusable modal component that I can animate in some sort of HOC with a trigger button or w/e.
I am creating it using createPortal, and the goal is to have some simple animations be added to on enter/exit of said portal.
I have gotten this to work using GSAP, but ideally I would love for this to go along with SC instead so that I don't have to pull in another animation library.
For the life of me I just cannot get this to work with SC and would love if someone could point me in the right direction.
I have made a sandbox here: https://codesandbox.io/s/r44w9m4o5p using GSAP to run the animations, and it's a bit hacky but it is in the proper direction for what I am going for.
Also, is there a benefit to using react-transition-group over something like https://github.com/react-tools/react-move?
You can use the CSSTransition component instead of Transition. CSSTransition will just toggle approriate class names using given animation timings: .*-enter, .*-enter-active for in-transition and .*-exit, .*-exit-active for out-transition. So you can define all transitions using CSS3 properties with styled-components.
Take a look at my fork: https://codesandbox.io/s/zz95v5103
I've just extended your Modal with transition styles. Note that extending styles requires className property for the component to be extended, so I've added that property to your Modal component.
I'm new to React and want to animate a button on hover, like I could do using jQuery. First I want to change the height. When that animation is done (which I would check for using .stop() in jQuery), I want to then animate the weight. What is the best way to do this in React?
A good solution for simple usecases is to include react-transition-group.
Examples here: http://reactcommunity.org/react-transition-group/css-transition