I'm using framer-motion to animate an Icon component when hovered as follow :
<Icon
initial={{ scale: 1, color: "#B9BBBE" }}
whileHover={{
scale: 1.15,
color: "#FFCC4D",
}}
transition={{ type: "spring", stiffness: 500 }}
>
<Emoji />
</Icon>
The Icon contains a simple SVG Emoji with a grey color #B9BBBE, and I also use this color in the initial prop.
I need the transition to go from that to the yellow #FFCC4D, but when I move out of the icon, it transitions back from the yellow to a shade of blue and then the initial grey color.
I can't figure out how to transition from yellow directly to the grey, without any weird colors in between.
I also tried to pass an array as follow, but still got the same result :
whileHover={{
scale: 1.15,
color: ["#B9BBBE", "#FFCC4D"],
}}
I guess stiffness creates this color "bounce":
A spring’s Stiffness determines the spring's velocity and how many times the spring will bounce before the spring settles and the animation ends.
So you need apply spring and stiffness only for scale property for bounce effect, and leave color as is:
<motion.div
style={{ height: 100, width: 100 }}
initial={{ scale: 1, backgroundColor: '#B9BBBE' }}
whileHover={{
scale: 1.15,
backgroundColor: '#FFCC4D'
}}
transition={{ scale: { type: 'spring', stiffness: 500 } }}
></motion.div>
Codesandbox
Related
I am trying to make a background using two View to look , but I am falling to set the "start" of the radius on the left size.
The result I get using :
borderBottomLeftRadius: '20%',
borderBottomRightRadius: '40%',
Is this:
But I want this:
I want the "radius" start more vertically
Any tips how I get this effect?
Thank you
Exact shaping like this through radius is probably not possible, I achieved this by use of transform: [{ scale }]
Here is the code
const { width } = useWindowDimensions();
<View
style={{
backgroundColor: '#00ffff',
borderBottomLeftRadius: width / 3,
borderBottomRightRadius: width / 2,
borderWidth: 2,
borderColor: 'black',
height: width / 2,
width: width,
transform: [{ scale: 1.4 }],
}}
/>
Here what it looks like, is this workable for you?
you can tweak the values a little bit to meet your requirement.
I want to create an arrow as shown in the below image
I got it using svg -
<svg height='24' width='12' style={{ marginBottom: '-4px', marginLeft: '49%' }}>
<line x1='6' y1='0' x2='6' y2='28' style={{ stroke: '#D0D0D7', strokeWidth: 2 }} />
<polyline points='0,14 6,8 12,14' style={{ fill: 'none', stroke: '#D0D0D7', strokeWidth: 2 }} />
</svg>
But I want to use material ui icon and there is no material ui icon where the upward arrow head is at the middle of the line.
The following are available in material ui
- arrow without a line
- arrow head at top of the line
Is there a way of using the KeyboardArrowUp icon from option 1 and put it at the middle of a line? or any other way to achieve what I want?
i guess it clear in the doc .. https://material-ui.com/components/icons/
but either way you can use SvgIcon or the normal icon
function HomeIcon(props) => (<SvgIcon {...props}><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></SvgIcon>);
or use
<Icon color="primary">add_circle</Icon>
I have a green background green buttons with icons, so the buttons are "invisible" and only the icons appear:
I would like to set elevation to the icons, but of course when I set it creates the elevation around the button:
Is there a way to make the elevation around the icon itself? Maybe blur it somehow? For iOS I'm just using:
shadowColor: '#000000',
shadowOffset: { height: 1 },
shadowOpacity: 0.15,
shadowRadius: 4,
I'm making an React Native App in which i have 2 buttons/ TouchableOpacity's. When styling these buttons, they both get double border even when explicitly stating 'solid' borderstyle in the respective stylesheets. ( On the attached screenshot the middle button is all white, but when I make the border a different color it is a double one as well ). No where in the whole file have I defined a double borderstyle.
bottom left button stylesheet:
roomsbutton: {
alignItems: 'center',
backgroundColor: '#009DDC',
padding: 5,
borderRadius: 2,
borderWidth: 1,
borderStyle: "solid",
borderColor: 'white',
color: 'white',
}
and its parent view:
<View style={styles.bottom}>
<TouchableOpacity
style={styles.roomsbutton}
onPress={() => Alert.alert('more rooms')}
>
<Text style={styles.roomsbutton} >FIND MORE FREE ROOMS</Text>
</TouchableOpacity>
</View>
You are passing the styles to the <TouchableOpacity> and the <Text> components. So they are both surrounded by the border
You pass style={styles.roomsbutton} to both the TouchableOpacity and the Text components. Each have a solid white border
this is happining because you apply className .roomsbutton two times in a button. once in TouchableOpacity and once in Text.
just remove style={styles.roomsbutton} form Text like below..
<Text>FIND MORE FREE ROOMS</Text>
I am using Highmaps in one of my web based application. Until now it was easy to modify it according to my use case but now i need to changes the border color of the region and i am unable to do it.
Code i have tried but failed:
chart: {
plotBorderColor: '#ffffff',
borderColor: "#ffffff",
}
See attached image what i want to achieve
Want to change the outline color to white
http://jsfiddle.net/qLen614m/
You can use the stroke attribute of the path element:
path {
stroke: white;
}
There is an options to set border color for map series. It is borderColor and it should be set in series.
series : [{
borderColor: 'white',
...
API link
Example: http://jsfiddle.net/qLen614m/1/
You should use borderWidth property for series.
The border width of each map area.
series: [{
borderWidth: 2
}]
Here is the official demo.