I am trying to animate a carousel transition with Framer-motion motion.div, I am doing some reading but haven't made much progress as this is my first time using animations. If anyone could point my in the right direction I would be very grateful! I basically have a piece of state linked to my pagination that sets the scroll direction on the animation to either "left" or "right", i really just need to figure out a way to set the enter and exit animation on my motion.div using this right or left from state. I could change the state to have any value really.
I guess what Im confused about, is i'm currently showing the cards in my table as a Stack of items, and when I paginate, the stack changes, the cards currently shown change to the next set in the data object. I suppose Im not understanding how to animate the entrance and exit of one div as its changing? Im continuing to read about animations but am in a real hurry to get this done.
heres what I put together:
<AnimatePresence exitBeforeEnter>
<motion.div animate={{ x: { ???? } }}
style={{ position: 'absolute' }}>
<HStack spacing={6}>
{data.objectives.edges.map(e => (
<ObjectiveCard
objective={e.node}
key={e.node.id}
completeObjective={completeObjective}
/>
))}
</HStack>
</motion.div>
</AnimatePresence>
Related
I have problem with slider in react.
In line 32, I have hover background for each slide, but hover working only on last slide, why?
- url for stackblitz
I trying everything, I spend on this 3 hours, what is wrong?
I found the problem. As I can see, you built a custom slider which is a good thing. But here, the other slides are actually layered relatively on top of each other. Which means the last slide will always be at the top of the stack even if the opacity is 0. I thought of using z-index to control it but I think this is even cleaner:
<div key={key} className={`absolute inset-0 transition duration-500 ease-in-out ${activeIndex === parseInt(key) ? 'visible opacity-100' : 'invisible opacity-0'}`}>
I modified Line 23 in SliderContent.jsx such that, if the current block is not active slide, add Tailwind's 'invisible' class so it pops it from the top of layer and user can hover successfully.
Tried it, it worked. Goodluck :)
I want to have a looped pulse effect on my circle View similar to this in my react-native app using only Animated api, no react-native-animated since I get build error with it.
https://codepen.io/Yario/pen/bQZMBM?css-preprocessor=scss
I only want the outer effect, no shrinking.
I think this could be done with scale and maybe opacity for added better effect but all the examples I found use reanimated and I don't have the knowledge to reverse engineer the examples.
<Animated.View style={{ animatedStyle, width:50, height:50, borderRadius:50/2, backgroundColor:'red' }} />
Can someone with more expertise on Animated api help me?
I have a screen which contains a list of items that is being shown using flatlist, th flatlist is as below :
<FlatList
scrollEnabled
removeClippedSubviews
windowSize={21}
stickySectionHeadersEnabled={false}
showsVerticalScrollIndicator={false}
keyExtractor={keyExtractor}
getItemLayout={getItemLayoutFun}
ListHeaderComponent={listFTUEHeader}
contentContainerStyle={{ flexGrow: 1 }}
data={DISCOVERY_SECTION_LIST}
renderItem={renderItem}
onRefresh={onRefresh}
refreshing={false}
viewabilityConfig={viewabilityConfig}
ListFooterComponent={EndOfListText}
onScroll={onScroll}
/>
I want to detect when the ListHeaderComponent is out of viewport or item[1] is at the top of the screen, accordingly I want to add a state.
I have read the documentation but could not find a way, hopefully would get any leads from here.
Any leads would be helpful, thank you in advance.
I'm in the exact same situation, so far i only could find a solution to check, if a specific item is in the viewport, but nothing about the ListHeaderComponent.
FlatList has a prop called onViewableItemsChanged which you can easily implement. When you scroll a FlatList, the items showing on the FlatList change. Then, this function is called, telling you what current viewableItems are and what changed items are.
See also this article for further explanation.
Maybe this helps you to get closer to a solution which works for you?!
I'm working on this as well and this is the best option I've found so far:
Get the height of the header
If you know the height on all screen sizes, create a variable to reuse
If not, use the onLayout prop to get the height
Use the onScroll callback and get the y offtset via event.nativeEvent.contentOffset.y
Did you ever end up finding another solution for this?
I am using React Beautiful DnD to create a nested list. I know this is not supported by the library, but I've seen plenty of workarounds and my use-case is relatively simple (no dragging sub-list elements between parent lists; sub-list elements can only be dragged within their respective sub-list).
The issue is as follows: trying to drag elements from the nested list sometimes drags the parent list elements instead. (I just made a long post documenting my problem here.)
I haven't gotten any responses yet, so I stared thinking about other ways to potentially solve the problem. I realized one solution could be choosing only a specific area of each list element that can be clicked to drag, and making sure this area does not overlap between the parent/nested lists.
Seeing that this is possible here, I simply need to add {...provided.dragHandleProps} to the element that I want to serve as the drag handle.
However, my nested list is built using two instantiations of a reusable DnDList component that I wrote, so it gets a little more complicated. Rather than trying to figure out how to specify a drag handle as props, I'd like to just set the drag handle to be list item marker for each list item (the '1', '2', '3', etc next to each list item).
How can I add {...provided.dragHandleProps} to the li::marker elements of my list?
Here's how I figured it out:
I ultimately used CSS to turn off the list item marker (listStyle: "none"), then wrapped each DnDList item in a flex container with a clickable drag icon that I manually placed on the left of the list item (first sibling in the flex container).
I also overlayed an invisible div over the drag icon, and placed the {...provided.dragHandleProps} here. It looked like this:
<div className={classes.listItemWrapper}>
<div
className={invisibleDiv}
{...provided.dragHandleProps} // MUST CLICK THIS TO DRAG
>
<DragIndicatorIcon className={classes.dragIcon} />
</div>
{child}
</div>
Here is what the styling looked like (using material UI):
listItemWrapper: {
display: "flex",
position: "relative",
},
invisibleDiv: {
position: "absolute",
left: "-4%",
top: "36%",
width: "40px",
height: "40px",
textAlign: "center",
},
Hope this is useful for somone!
I could not see your DnD component. But the possible solution is to remove the DragDropContext component from the inner DnD component which must solve the problem. Meaning you must have only one DragDropContext for your entire Draggable and droppables.
This is from a Udacity flashcard project. Say I have this screen:
A "Next card" button appears conditionally upon the user hitting "Correct" or "Incorrect" (a value gets set in component state and the button is rendered conditional on that value being true):
All of this content is inside a <View> with alignItems: 'center' and justifyContent: 'center', so when the button appears, everything shifts slightly along the vertical axis.
I'd like to create some kind of "blank" placeholder that will have the exact same size as the "Next card" button and have it "render" before the Correct/Incorrect button is hit, so that this shift does not occur.
I recognize I could set a hard height/width on the button and make some kind of placeholder item with the same size, but this is a general question and I'd like to leave appearance to device defaults as much as possible.
Is this possible, and/or a sensible approach? If not, why not, and what would you suggest instead?
Thank you!
I assume you're doing something like this to render the Next Card button.
{this.state.answerSubmitted && (
<TouchableOpacity>
<Text>Next Card</Text>
</TouchableOpacity>
)}
Instead, you could do something like this, your button will be there, just not visible and clickable.
<TouchableOpacity
disabled={!this.state.answerSubmitted}
style={{opacity: this.state.answerSubmitted ? 1 : 0}}
>
<Text>Next Card</Text>
</TouchableOpacity>
If you already have a style for the button, you can use the array notation.
style={[styles.yourStyle, {opacity: this.state.answerSubmitted ? 1 : 0}]}