Thanks tom for the video, i really like how you explain little things about tools before using it
@samuelsamson6902 ай бұрын
Bruvh you’re toooooooo goooood. God Bless You.
@tamerahmed98602 ай бұрын
Awesome news! Thanks Mate
@twanadler92 ай бұрын
bro how to apply one by one animation to a array list of items mapped ?
@mudgalz2 ай бұрын
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.
@harshitpant072 ай бұрын
@10:15 how does react know its a rotate property and what is -18,18 here
@sohrabkhan1012 ай бұрын
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.
@tomisloading2 ай бұрын
Awesome answer, thank you!! 😁
@harshitpant072 ай бұрын
@@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_2 ай бұрын
@@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
@pafacil2 ай бұрын
@@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