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?
Related
I am trying to build a React component with the following features:
When "Information" on the html body is clicked, a component slides left.
The component has different tags (<h1> <h3><h5> etc.) that should then stagger and fade in with a small intermittent delay.
When the component is clicked to be scrolled out, the tags should stagger and fade out.
The CodeSandbox
Please someone help me, I have tried framer motion, spring, csstransitions... etc, but i cannot get what I thought would be a quite trivial task to work robustly!
Thank you so much.
EDIT: This means that I would like this to happen automatically without the button
I want to animate an element when mounting so that it appears from the bottom. My project is using Material UI. MUI has a component called Collapse that seems to be for this purpose, however it only animates from the top or left, and it does not accept a property for reversing the direction. How do I get around this?
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
I'm trying to use reactstrap collapse instead of reactjs transition for sliding my div horizontally. because the height of div changes according to the content of that. so I can't use transition. now I need to set a duration for collapse animation but I couldn't find any solution. can anybody help me?
When I open the item-accordion I have used the animation .But the item-accordion has the image that is wrap in the multiple row using display flex property of the CSS3. Whenever I open the accordion the extra content is displayed on the right during transition.So can anyone suggest what can be done to solve it?And this happens when width of the content is small
Another problem is i have used the animate-repeat animation to delete the item.But when i open the item-accordion the animation is applied to them also hence animating the image as a list.
.list .item-accordion {
-webkit-transition:0.09s all linear ;
transition: 0.09s all linear;
}
This is the animation I am using.
The demo of the code is over here:
http://plnkr.co/edit/FnQVCYrSGOlpk5wNxAZ6?p=preview
I have had similar issues when having to meet complex animation requirements. I have used greensock for more complex animations but that doesn't seem to be needed here. The general concept is that you are going to want to animate something but change/alter the properties before and after the animation has completed. You are going to have to be using a few callback promises to run additional animation after the first part of the animation has completed or do some manual calculations and adjust properties before starting or ending.
Angular Animate
Ionic Animate
It seems like ionic is allowing for onStart and onEnd callbacks. I would hide or force certain properties onStart and reset them onEnd so that you can get around what you are trying to work with. If you are not wanting to work with a fixed width or height you are going to have to grab window/screen size and so some basic calculations based on that. So you would get your window size set the size based on the window for the animation then reset back to auto when completed.