Tinder Style Swipe Cards with React & Framer Motion

[@rahulprasad7371]

Thanks tom for the video, i really like how you explain little things about tools before using it

[@samuelsamson690]

Bruvh you’re toooooooo goooood. God Bless You.

[@tamerahmed9860]

Awesome news! Thanks Mate

[@twanadler9]

bro how to apply one by one animation to a array list of items mapped ?

[@mudgalz]

Hi bro, Idk you will see it or not. but can u make a video on creating a fully responsive and virtualized masonry component where i can pass data from outside and also render card. I tried react-virtualized but its not working finely, sometimes gettting key error sometime resize error etc.

[@harshitpant07]

@10:15 how does react know its a rotate property and what is -18,18 here

[@sohrabkhan101]

React doesn't inherently know it's a rotate property; that's actually controlled by Framer Motion, which @Tom is using here. The useTransform hook from Framer Motion is what maps one set of values (in this case, [-150, 0, 150]) to another ([-18, 18]). The first array represents the input range, and the second represents the output range for the rotation. So, when component moves across the X axis, its rotation will interpolate between -18 and 18 degrees based on its position.

[@tomisloading]

Awesome answer, thank you!! 😁

[@harshitpant07]

@@sohrabkhan101 i think you didn't get my question in first case our input is [-150,0,150] whose output as you say is [0,1,0] And in rotate it's [-150,150] output [-18,18] So I am asking how does fm knows it's whether the input is for opacity or rotation is it based on the number of Inputs in array?

[@paradoxify_]

@@harshitpant07 No it doesn't depend on the number of inputs in array, also framer motion doesn't know whether input is for opacity or rotation, for the opacity when x is 0 we want img opacity to be 1 and when x is -150 or 150, we want the opacity to be 0, so that's why he put three values for opacity, while in rotation when x is 0 we want the rotation to be 0 to, so that's why he skipped the 0 in rotation input array, even if you put 0 it won't make any difference, if he does the same for opacity then when x is 0 of the image, image opacity will go to 0 which we don't want

[@pafacil]

@@harshitpant07 ​ If I'm not wrong, it just depends on the variable you use then in the "style". He defined a const called "opacity" (could have been named "foo" or whatever if you prefer, but less logical) being a mapping via useTransform. Then, in the style, he is using "opacity" -which means opacity: opacity - (but it could have been "opacity: foo" with a const called foo... it just makes more sense to call it "opacity" :) ). The same with "rotate". Hope this helps

[@352Pking]

First

[@sayantanadityadev]

swiperjs/demos/effect-cards with infinite loop