search

reactjs / react-transition-group

An easy way to perform animations when a React component enters or leaves the DOM
https://reactcommunity.org/react-transition-group/
Other
10.18k stars 649 forks source link

The layout of a shared animation, such as in framer motion #882

Closed michalk91 closed 1 year ago

michalk91 commented 1 year ago

I'm creating a lightbox and need an opening animation. After opening the lightbox, the slides can be moved in a carousel, which causes some problems when I use framer motion. I would like the animation to look like when using framer motion "shared layout animation". I don't want to use framer motion. Can I do it using this library? Can you give me link to codepen with example? If it is not possible, could you give me a library other than framer motion that will allow me to do it(i prefer lightweight libraries)?

Framer motion example link: "https://codesandbox.io/embed/framer-motion-animatesharedlayout-app-store-demo-i1kct?codemirror=1" When I click on an image it will open for me in a modal with smooth scale abimation. This it what i need.

Thank you very much for your help and time. Greetings.

thanhtutzaw commented 1 year ago

I think you should deep learn how framer (shared layout) works . I also interest how it works . If you faced issue with transition-group with framer , You can use without transition-group , write own code .Example write own un mounting on exit
Now I was facing issue module css with react-transition-group Example

Drawer_drawer___Ga5i-enter-done

cannot set that class in css module ( Drawer.module.css)

michalk91 commented 1 year ago

I found anwser. This animation technique is called "react flip animation". Unfortunately, it's not that simple, you have to take the coordinates and sizes of the elements and simulate the transition between them. I used this library- react-flip-toolkit It is much lighter than the framer.