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?
Related
I would like to use carbon design motion in a react project.
I've been following the guidelines here:
https://github.com/carbon-design-system/carbon/tree/v10/packages/motion
I've added this line into my codesandbox (my sandbox linked here: https://codesandbox.io/s/carbon-components-react-forked-3ul1pt?file=/src/index.js:0-514)
const { easings, motion } = require('#carbon/motion');
but not sure now how to use 'easings' or 'motion' to animate a component/
How could i use carbon design to make the buttons in the codesandbox above fade in or out?
(or do any animated transition for that matter)
thanks
The motion() function will return a cubic bezier string that you can provide to css-in-js styling to control the rate of motion for your animations. This can be used for any property that is animatable. Similarly you can specify this in sass if you're using sass for writing your styles.
For fading a button you would place opacity: 0 on the component by default, and then toggle a secondary class/style with opacity: 1. This would transition the component from transparent to opaque when the class/style is applied and vice-versa. Alongside the opacity, you can specify the cubic bezier value.
Here's a good article on the topic that might be helpful to read more about how to use these properties.
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>
I have two divs one on top of the other.
The top div is revealed with ngAnimate and pushes the second div down.
I want to use a translateY animation to reveal the top div because it looks good.
#keyframes enter_not_smooth {
from {transform: translateY(-100px);} to {transform: translateX(0px);}
}
#keyframes leave_not_smooth {
from {transform: translateY(0px);} to {transform: translateY(-100px);}
}
Problem: The bottom div does not move smoothly as the top div is revealed, it instead jumps to it's final position.
If I use a height animation to reveal the top div the bottom div moves smoothly as the top div is revealed.
#keyframes enter_smooth {
from {height: 0px;} to {height: 100px;}
}
#keyframes leave_smooth {
from {height: 100px;} to {height: 0px;}
}
Please see this jsfiddle if you need clarification https://jsfiddle.net/9bz4Lwxa/105/
Question: Is there any way I can achieve a smooth animation using the translateY property or another property that will achieve a similar reveal animation where the top div does not grow in height but is full sized and just pushes the bottom div out of the way?
Thank You.
This is a tough one and something I've spent hours and hours and hours trying to accomplish. The only working solution I've come up with is really complicated and not worth all the extra code.
The problem is that when you use transform to animate an element, its bounding box remains static (seemingly behind the DOM scenes) and will not animate as to not affect any sibling elements. For reference, I'd read up on: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
As an alternative to animating height/width/etc (because it causes repaints/reflows in the browser) I've resorted to using transform animations that simply feel better given the predicament.
I've created an example based on your fiddle here:
https://jsfiddle.net/tommywhitehead/5q6wec92/1/
Note: It looks like you might be injecting ngAnimate in a non-traditional way so it's not reading the transition timing function (what places .ng-enter and .ng-enter-active at the right times) but I think this should give you the right idea.
I hope the big vendors can fix this somehow because this has been a huge issue for many devs.
Hope that helps!
I'm trying to animate a MapView in React Native so that when it's pressed, it goes from being an element in a ScrollView to the map covering the entire screen (including navigation and status bars).
For the overlay view I'm using react-native-overlay
I've got it sort of working by:
measuring the map position with UIManager.measure
activating the overlay and rendering the same map but now inside an overlay
positioning the map relative to the overlay based on measurement
animating the map size to cover the entire screen
The problem is that when going to/from overlay, the entire map reloads which effectively kills the magic of the animation.
From what I understand, since I move the MapView pretty far in the VDOM tree, React kills it and inits a new one. I've tried to avoid this by passing the MapView as a prop to the component doing the animation. My idea was that since the prop is not be changed, the MapView shouldn't be re-instantiated. Unfortunately this doesn't help..
I also tried wrapping the MapView in another component and having shouldComponentUpdate always returning false. Doesn't help either..
Is there someway I can prevent the MapView from re-initializing when I move it in the render tree?
My render tree looks like this:
var map = <MapView />;
When map in ScrollView:
<ScrollView>
...some other content...
{map}
</ScrollView>
when in Overlay:
<ScrollView>
...some other content..
<Overlay isVisible={true} aboveStatusBar={true}>
<View style={styles.fullScreen}>
<Animated.View style={[styles.mapContainer,{top: this.state.topValue, height: this.state.heightValue}]}>
{map}
</Animated.View>
</View>
</Overlay>
</ScrollView>
I believe you should add key property to the Map component. This is the only way to tell React that the particular components in two rendering passes are the same component in fact, so it will reorder the component rather than destroy/recreate. Without key, if the component moves in the tree, react will always destroy/recreate it as it does not know that it's actually the same component (there is nothing that could tell react it is). The key property works in lists/arrays but I think it should also work for more complex tree rearrangements.
See more details here: https://facebook.github.io/react/docs/multiple-components.html#dynamic-children
Note that the link above is for react.js not react-native, but I believe it should work in exactly the same way. I found that there are quite many concepts/details not explained in react-native tutorial, but they are clear in the react.js one (for example explanation about ref property). Actually the authors assume that you have experience with react (so I went on and learned React.js as well ;):
From https://facebook.github.io/react-native/docs/tutorial.html#content :
We assume you have experience writing websites with React. If not,
you can learn about it on the React website.
I'm trying to basically replicate the Starbucks mobile navigation but I can't figure out how to get their smooth slide transition when you click the three lines. It looks like they're using CSS3 transitions to achieve this animation but I can't replicate it.
I've got the same result but without it animating because CSS3 does not animate display: inherit.
Here is my JSFiddle, can anyone improve it with a CSS3 cubic bezier transition like Starbucks.com is using on their mob navigation? (you'll have to resize your window to see their mob nav obviously)
p.s. this needs to be CSS3, no jQuery animation please :-)
http://jsfiddle.net/zQxNd/2/
Best approach I've encountered is to set the default style of the hidden menu to:
display:block;
overflow:hidden;
height:0;
then in your .open set the height of the element:
height: 200px;
I edited your fiddle to show: http://jsfiddle.net/zQxNd/3/
Also, it's probably best to write a quick jQuery function to set the height of through jQuery -- it's not ideal, but it's the best solution I've found with the tools we have.
EDIT: and for getting the exact speed of the animation, you can play with this awesome little app: http://cubic-bezier.com/
Once you get the timing down, you can replace your ease-in in the transition declaration with something like this:
transition: all 1s cubic-bezier(.17,.67,.83,.67)