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>
Related
I'm looking to use the React Transition Group library to animate some stuff in my React page. According to those docs, the TransitionGroup component does the following:
The <TransitionGroup> component manages a set of transition components
( and <CSSTransition>) in a list. Like with the transition
components, <TransitionGroup> is a state machine for managing the
mounting and unmounting of components over time.
Consider the example below. As items are removed or added to the
TodoList the in prop is toggled automatically by the
<TransitionGroup>.
I'm not really sure what that means or why it's important.
Also, when I modify the example code that they embed on the documentation page so that the <TransitionGroup> tags are replaced with <ul> tags everything seems to work just fine (I can remove todo items by clicking on them, I can add new todo items).
Why is <TransitionGroup> component necessary? What does it do? (And why do things appear to work just fine when I replace it with an unordered list?)
React Transition Group has some advantages over typical css animations.These are some points that are coming to my mind.
Its uses binding to change classes for a components. eg: enter, appear, enter-active, appear-active, exit, exit-active etc are all part of animation classes. This make it really interactive interms of rich animations which you can not achive otherwise.
It has advatage to unmount your component using javascript, once animation is done. So basically no extra load on your front end.
It gives your freedom to define animations which ever way you like. Either css classes or defineing your own styles with in js file.
It gives you various type of animation options. Eg: Switch Transitions, Transition Groups, CssTransitions etc.
I would suggest to keep experimenting with typical css animations and react transition group and come to your own conclusion.
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 am new to React. Basically, I have been given a HTML Bootstrap template. It is pretty simple... a left sidebar (always present), an adjacent menu (always present) and all other components fit adjacent to side bar and under menu. I have attached a pic so you can easily see what I mean.
I can display the components but my dynamic components or the components that change are rendered below the sidebar and NOT next to it.
I have tried to solve this issue for days... no luck. Help would be greatly appreciated.
Thank you
Vincent
It seems like a css issue, make sure you have your child divs inside the parent and nothing is position absolute. if you have it online I can take a look.
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 trying to implement a pop over that can show on any screen in the web application, using React+Redux+React router
The popover is a container, that is triggered by the application state.
But how is the best practice to do such a thing, since the background is transparent, and it should just show on any screen that is currently presented.
Should it be on top of the router, on hidden, and unhide on present? I can seem to find any example for this senario...
Popover can sit inside Root component, something like this.
<App>
<HomePage />
{shouldShowPopOver && <PopOver />}
</App>
You can dispatch { type: TOGGLE_POPOVER } action anywhere, to alter shouldShowPopOver. The styling(transparent, whole page etc) should be done through css.
You ca use react-bootstrap popover. Checkout the link
https://react-bootstrap.github.io/components.html#popovers
I'm using react-modal component and it works pretty well.
I have used react-modal-dialog before and it works like a charm! The benefit of this library is that you can define your <Modal> component near where the source of trigger is (some button?) and it is easy to trace the condition that determines whether the modal is displayed since it is near the trigger source.
Using this library, technically it does not matter where you put the modal component among your markup as the CSS of the modal makes it appear above all other elements.