https://codesandbox.io/s/keyframe-plus-whilehover-zodx7?file=/src/App.js
If keyframe animation is applied to a component, any event like whileHover or onTap won't work on that motion.div.
The reason why using styled component for animating a div is sometimes framer motion for example couldn't change z-index during keyframe animation. I am trying to combine both styled-component with framer-motion together.
you simply don't mix keyframes with framer-motion. The whole point of developing framer-motion was to make animations simpler and more React friendly than using CSS. Read the documentation and get some practice to get a better grasp of its capabilities.
I reformated your code, you can check it here https://codesandbox.io/s/keyframe-plus-whilehover-forked-y7iqr?file=/src/App.js
Related
I'm wondering if there is a way to set the fadeout animation of dialogs in vaadin-flow 14.
In Vaadin 8 you could use the css classes "v-window-animate-in" and "v-window-animate-out" to archive this.
Since the div of dialog overlay div is in the shadow-dom i can not access it easly through css.
Yes, it’s possible. And the default Lumo theme actually has a built-in close animation, but I suppose it’s so subtle you can miss it :)
Here you can find the built-in animations: https://github.com/vaadin/web-components/blob/master/packages/dialog/theme/lumo/vaadin-dialog-styles.js#L35-L67
Basically, you add an animation property to the host element when it has the [closing] attribute set on it (:host([closing])). The host element animation is used to track when the dialog can be removed from the DOM, so we are using a “dummy” animation on it with the same duration as the actual animations on the [part="overlay"] element. You can also animation the backdrop element ([part="backdrop"]).
I'd like to know what perf differences to expect from css animation (keyframes) vs css transition.
In my testing it seems there are situations where transition performs far better than keyframes. This article also suggests the same but it's from 2015 so thought it might be outdated https://www.pixelstech.net/article/1434375977-CSS3-animation-vs-CSS3-transition
Looking at MDN https://developer.mozilla.org/en-US/docs/Web/Performance/CSS_JavaScript_animation_performance
it states "In terms of performance, there is no difference between implementing an animation with CSS transitions or animations. Both of them are classified under the same CSS-based umbrella in this article."
So I'm surprised to see such as difference in testing. Maybe they're the same on firefox, but using Chrome I definitely see a difference.
I've made some tests on codesandbox to show animation jank with keyframes vs transition. Some important factors here:
1. I'm animating both transform and border-radius. I know you "shouldn't" animate border-radius, but this is part of the test.
2. When I combined the 2 tests into a SPA and toggled between them they both performed well, so it may be to do with page load.
To view the test in all its jankiness select 'mid-tier mobile' using chrome dev tools.
Janky css animation
https://codesandbox.io/s/perf-test-css-animation-nl6xs
Smooth css transition
https://codesandbox.io/s/perf-test-css-transition-fgd7w
Any help with this would be appreciated. I'm sure we can't fix it, but would like to know why keyframes sometimes has poor performance compared to transition.
Thanks!
Both seem like they should be pretty efficient animations as they are only composite changes (as they animate on scale which is efficient):
https://csstriggers.com/transform
I think the issue might be the fact that your test is not a "fair" comparison.
css animation (keyframes): This animation occurs straight away on the client browser. Also it's executing some more emotion code for keyframes.
css transition: This animations happens when React has completed its mount (as its done on a useEffect hook) and doesnt execute a keyframes function.
So the first css animation (keyframes) test might be effected by React taking precious resources away from the browser animation while it completes its lifecycle events.
Also the extra emotion keyframes call could slow it down - it makes another css call https://github.com/emotion-js/emotion/blob/6cb8d15438b01b8623af42f304d5ea3032332187/packages/core/src/keyframes.js#L11 so effectively you're calling css twice with the keyframes test.
Might be better to make a comparison in plain HTML + CSS so React or JS don't get in the way and give you false impression one is better than the other
I'm quite new to React,
I have imported an SVG and would like to animate few clones of it, eventually they will end up in the same row, should i be using use flexbox?
I have done it statically using flexbox, but i would like to animate each svg component so they will appear on the screen gradually (one after the other). Any suggestions how to accomplish it?
Thank you all
you can use GSAP (GreenSock) library to achieve that, just trigger the animation after componentDidLoad() in your React component.
You can learn about GSAP staggering here:
https://greensock.com/stagger
Hope it helps!
you can use CSSTransitionGroup for react
here are doct from react to do it
https://reactjs.org/docs/animation.html#high-level-api-reactcsstransitiongroup
https://reactcommunity.org/react-transition-group/
this animations works on enter and leave from dom of element
<CSSTransitionGroup
transitionName="example"
transitionEnterTimeout={300}
transitionLeaveTimeout={300}
/>
<CSSTransitionGroup>
I'm currently trying out angular2's animation and I was wondering what specific advantage they bring over standard css animations/transitions.
e.g. a typical material designed card and hover effects with the box shadows. Most css frameworks use :hover and css-transitions. Is there a particular advantage in using angular 2 animations?
I read somewhere that some css animation properties don't invoke the GPU as much, hence there's somethings delays and lags. What about angular2 animations?
The question is actually more javascript animation vs css animation (because angular2's animations are based on javascript-animation).
The answer is that when you can - use CSS animation.
Modern browsers uses different thread for CSS animation, so the javascript-thread is not affected by the CSS animations.
You can use the HTML5 Animation Speed Test to check the preformance of different frameworks (javscript-based) VS CSS animation in your browser.
In general:
Browsers are able to optimize rendering flows. In summary, we should always try to create our animations using CSS transitions/animations where possible. If your animations are really complex, you can may have to rely on JavaScript-based animations instead.
If you want to know specifically regarding the Angular2 animations - just inspect the element in your browser and check if the animation there is a CSS(transition/animationFrame based or javascript (you will be able to see values in the style attribute change during the animation).
The answer is actually in the docs:
https://angular.io/guide/animations
Angular's animation system lets you build animations that run with the
same kind of native performance found in pure CSS animations. You can
also tightly integrate your animation logic with the rest of your
application code, for ease of control.
It also abstracts away the need to keep track of lengths of animations in order to stagger and avoid overloading the browser, or in chaining animations.
Generally, if you have a simple little thing, CSS is probably easier. But if you are consistently doing animation in your app you get a lot of power with little down-side from Angular Animations.
I am developing an app using PhoneGap and jQuery, and am a little confused about animations.
I decided to go with what I already knew, which was jQuery animate, and this worked great, except I came across people talking about hardware acceleration.
All I am doing is animating a div to move right on page load:
$("#"+that).find('.captionShine img').animate({left: '550'},700);
I found a plugin called jQuery-Animate-Enhanced which turns these animations into CSS3 transitions, therefore hardware accelerating them (I believe).
So I looked more into the CSS3 animations, and am confused as to the difference between transitions and animations in CSS3. Can I still use hardware accleeration on the CSS3 animations? Or can it only be done on transform: translate3d(0,0,0);?
Is it just a case of assing translate3D to any element I want to have hardware accelerated?
kirupa has a very good explaination here: http://www.kirupa.com/html5/css3_animations_vs_transitions.htm
Skip down to read his conclusions bullet point first and then start reading from the top to fill in the details. Basically, transition and animation are two different way you define animation in css. Below is my own translation of the author conclusion.
Transition allow you to do very simple css that animate from a to b. Imagine you have an element with class="from-a" then you add a class to that element called class="to-b". Your transition definition in class="to-b" is where your animation ends.
Animation allow you to define/orchestrate the entire animation using keyframe css definition. Keyframes allow you to breakdown and orchestrate series of complex animations.
As you can see, because Transitions are based on adding of class or style to an element. You can easily define a series of classes and use with javascript+timeout to set these class and create the same kind of orchestration as Animation.