I'm trying to animate text in React by using scss (probably it doesn't matter). It doesn't work.
In SCSS file:
.animate {
animation: 3s linear 1s infinite alternate slidein;
}
Aplied on my text:
<h2 className="animate">Order is active.</h2>
Should I do something more?
Thanks for the answer!
You can use marquee:
<marquee behavior="slide" direction="down">Order is active.</marquee>
For more attributes: https://www.w3schools.in/html-tutorial/marquee-tag/
You have to use animation with #keyframe. #keyframe specifies what to do, animation when and how
https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation2.
Or you can use "transition" with additional class name
https://developer.mozilla.org/ru/docs/Web/CSS/transition
Somethin like this:
#scss
.main-class {
opacity: 1;
transition: 1s;
}
.hide-classname {
opacity: 0;
transition: 1s;
}
#jsx \ tsx
const [hide, setHide] = useState(false)
return(
<div className={`main-class ${hide ? 'hide-classname' : null}`}>
i will disappear
</div>
)
You can handle any kind of animation like low level to high level animation using this npm package built for react. react-transition-group.
mountOnEnter is one of the future available in it. which mount the component and start animate based on Boolean condition.
These animation states be will handled in class prefix from css followes.
entering
entered
exiting
exited
all kind of animation possibilities which are done in animate.css can be handled in above states.
You could try to checkout react-animated-text-builders. It's a small lib that supports some text animations. Nothing fancy, but maybe those animations are sufficient for your purposes:
<FloatingLettersTextBuilder
floatingSpeed={500}
lettersAppearanceDelay={250}
> Floating Letters
</FloatingLettersTextBuilder>
This will slide the text in from right to left.
Related
I am trying to use react-transition-group to animate the entry/exit of two components. The Transitions are working fine, but the only issue is that when *-exit is fired for the exiting component, the other component also enters the DOM and the exiting component is pushed down before leaving. You can see it happening in the codesandbox below. How can I have a delay so that the *-enter is fired only after *-exit completes? Any help is appreciated.
Code - https://codesandbox.io/s/csstransition-component-06bpo
I made something similar with react-spring. My solution was to use absolute positioning. This way the two components are on each other and the entering and exiting animation is in the same time. I added a style in the Child.js
const style = { position: 'absolute', width: '100%' };
return (
<div style={style}>
{props.type.list ? (...
And I also modified the enter animation to be left to right, it seems better I think.
.alert-enter {
transform: translateX(-100%);
}
Here is the example: https://codesandbox.io/s/csstransition-component-xuw2t
I'm using ag-grid-react like this:
import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";
and declares it like this in render(some details removed for clarity):
return <div className="MarketGrid ag-theme-balham" >
<AgGridReact domLayout='autoHeight'
enableCellChangeFlash={true}
rowSelection={'single'}
onSelectionChanged={this.onSelectionChanged.bind(this)}
onGridReady={this.onGridReady.bind(this)} />
</div>;
the "enableCellChangeFlash" property works fine, and I know how to change the color of it, but what if I want to change the color depending on whether the new value is higher or lower than the previous?
My update code looks somewhat like this:
let row = this.gridApi.getRowNode(this.props.productIds.indexOf(id));
for (var f in data) {
row.setDataValue(f, data[f]);
}
}
I guess I should set the cell style somewhere, but I'm not sure where.
UPDATE: According to this page https://www.ag-grid.com/javascript-grid-data-update/#flashing I should do this:
"If you want to override how the flash presents itself (eg change the background color, or remove the animation) then override the relevant CSS classes."
Anyone knows how to do this?
I almost got this now. The answer I found out is based on CSS. Set the classname for blinking/stop-blinking like:
return (<div key={Math.random()}
className={some logic to set classname here, like "blink-red" or "blink-blue"}
onAnimationEnd={() => this.setState({ fade: false })}
> {this.state.value} </div>);
and use onAnimationEnd to set some state variable that will affect that logic.
Then add the fading logic like this to CSS:
.blink-red {
animation: redtotransparent 3s ease 5s;
}
#keyframes redtotransparent {
from {
background-color: red;
color: white;
}
to {
background-color: transparent;
color: black;
}
}
It's still not perfect, but almost there. Changing the key makes React think the DOM has changed. When I come up with anything better I will add it here.
Click on the Flashing Cell option in the dropdown at the top and then you can choose a different color for an up change and a down change. you can also set how long it will flash for.
I have an overlayed view in my React Native app which I need to animate on and off screen when the user pushes a button. I know how to position the view and animate it but I can't work out how to trigger the animation.
My redux store has a very simple state with an isOpen flag saying whether the panel is open or closed. I map the state to the panel component's props and when the isOpen prop changes I want to trigger the open or close animation. Obviously if the user presses the toggle button mid animation the currently running animation needs to be cancelled.
This should be simple but I can't find any examples. Any help would be much appreciated.
React Native
To begin an animation on a change of props you can simply start your animation in componentDidUpdate. Here's an example:
componentDidUpdate(prevProps) {
if (this.props.isOpen !== prevProps.isOpen) {
this.state.animation.start();
}
}
Assuming your animation is defined in the component's state.
React (Browser):
[Not relevant to this question but potentially useful.]
A simple way to do this is using CSS transitions. What you can do is give the panel component a CSS class for closed (or open but I find using the closed/collapsed as a style easier because then the default is open).
Then in your panel's render:
render() {
const { isOpen } = this.props;
return <div className={ 'panel' + (isOpen ? '' : ' closed') }></div>
}
And in your CSS:
.panel {
/* some other styles */
transition: .5s ease-in;
}
.closed {
height: 0;
}
This way CSS can handle the animation logic and your concern of clicking the open/close button before the current animation has finished is addressed.
Here are the CSS transition docs: https://developer.mozilla.org/en-US/docs/Web/CSS/transition
Edit: A disadvantage of this method is that height must be explicitly set when the panel is open.
Here's a little example snippet:
function togglePanel() {
const panel = document.querySelector('div.panel');
if (panel.classList.contains('closed')) {
panel.classList.remove('closed');
} else {
panel.classList.add('closed');
}
}
.panel {
background-color: #00c0de;
height: 4rem;
overflow: hidden;
transition: .5s ease-in;
}
.closed {
height: 0;
}
<button onclick='togglePanel()'>Toggle Panel</button>
<div class='panel closed'>
<span>Hello, I'm the panel</span>
</div>
Having trouble parameterizing css such that animationSpeed is taken from props.
I would want to replace the .2s below with animationSpeed
transitions.css
.Anim-appear {
animation: .2s linear pageFadeIn, .2s linear pageSlideInLeft;
}
...
component.jsx
import '../css/transitions.css';
const PageAnimator = props => {
const animationSpeed = props.animationSpeed + 's' // How to use this to set animationSpeed in CSS?
}
I am having a lot of trouble doing this and was wondering how I could get this done.
Note: this value doesn't change. After we initialize the app it is a constant value. But we have several versions of the App that all have different configurations and animation speeds.
document.documentElement.style.setProperty('--animation-speed', sec);
That's how I accomplished it. It seems to work. : )
Thanks to:
How to change CSS root variable in React?
I have to create some complex animations. It was cool to develop them with jQuery or VanillaJS, but I guess that I should choose another way with React. Google gave me ReactCSSTransitionGroup but it seems to be broken and unmaintained (according to this message: github.com). E.g. I can't make a delay before starting the animation.
I also found a library called React-motion but I'm not sure if it's actually a tool that I need. So I want to ask whether you can recommend me something about it. Probably I should use VanillaJS (using refs and other ReactDOM functions)? Or there is another approach to it? Thanks in advance.
The easiest way to do animations in React, or, in fact, anywhere on the web, is to use CSS Transitions.
CSS Transitions actually has nothing to do with React. Quoting MDN,
CSS Transitions is a module of CSS that lets you create
gradual transitions between the values of specific CSS properties. The
behavior of these transitions can be controlled by specifying their
timing function, duration, and other attributes.
Because CSS transitions is a pure CSS, they can be used in React applications, Angular, plain Javascript or even old-school server-rendered pages with no Javascript at all.
It is not the most versatile or powerful technique. But since in most cases the animations we want are pretty simple, why looking for something more complicated when a simple will do the job?
CSS Transitions are also well-supported by all major browsers with a notable exception of Opera Mini and IE below version 10.
CSS Transitions give us an ability to animate between the two CSS states. Let's say you want to animate opening and closing of a drawer (triggered by a click on a button). Let's assume we have a flex container around the drawer. When the drawer is opened, we want it to occupy 100% of the container width, therefore its max-width should be 100%. When it is closed, its width should be 0. We can create two CSS styles:
/* This CSS style is applied when the drawer is opened */
const openedStyle = {
maxWidth: '100%' /* max-with is 100% when the drawer is opened */,
};
/* This CSS style is applied when the drawer is closed */
const closedStyle = {
maxWidth: 0 /* max-width is 0 in the closed drawer */,
};
Then we handle opening / closing event apply one of those classes to the drawer object on opening / closing:
class Drawer extends React.Component {
state = {
opened: false // Initially search form is Closed
};
toggleOpened = () =>
// Toggle opened / closed state.
// Because we rely on the previous state, we need to use
// a functional setState form
// https://ozmoroz.com/2018/11/why-my-setstate-doesnt-work/
this.setState(state => ({ ...state, opened: !state.opened }));
render() {
const { opened } = this.state;
return (
<div className="drawer-container col-12 col-md-4">
<input
type="text"
className="drawer"
// Apply 'openedStyle' CSS class if the drawer is opened,
// and 'closedStyle' if the drawer is closed.
style={opened ? openedStyle : closedStyle}
/>
<button
type="button"
className="open-close-button btn btn-primary"
onClick={this.toggleOpened}
>
{opened ? 'Close' : 'Open'}
</button>
</div>
);
}
}
export default Drawer;
When we press the "Open / Close" button, the drawer will flip between 0 and 100% width, effectively opening and closing.
All we need now is to animate it.
For that we need a secret ingredient - a CSS transition property. All we need to do is to add the following style to the drawer:
/* This CSS style is applied when the drawer is opened */
const openedStyle = {
maxWidth: '100%' /* max-with is 100% when the drawer is opened */,
/* Upon transitioning to Open,
animate `max-width' for 0.5s*/
transition: 'max-width 0.5s'
};
/* This CSS style is applied when the drawer is closed */
const closedStyle = {
maxWidth: 0 /* max-width is 0 in the closed drawer */,
/* Upon transitioning to Closed,
animate `max-width' for 0.5s */
transition: 'max-width 0.5s'
};
Voilà! We've got our animation - upon clicking the button our drawer is now expanded and collapsed within half a second!
This is it in the nutshell, but there is more to it:
You can animate more than one CSS attribute with a CSS transition.
You can apply delay to transitionable properties, i.e. animate opacity first, and then animate width of the same element after 0.5 second delay.
You can apply various timing functions to transitions.
I wrote an expanded blog post explaining all the above: Painless React Animations via CSS Transitions.
Check out this easy to use and popular package:
https://www.npmjs.com/package/react-transition-group
Install:
npm install react-transition-group
Usage:
import { CSSTransition } from 'react-transition-group';
<CSSTransition
in={toShow} // boolean value passed via state/props to either mount or unmount this component
timeout={300}
classNames='my-element' // IMP!
unmountOnExit
>
<ComponentToBeAnimated />
</CSSTransition>
NOTE: Make sure to apply below styles using the class property in CSS:
.my-element-enter {
opacity: 0;
transform: scale(0.9);
}
.my-element-enter-active {
opacity: 1;
transform: translateX(0);
transition: opacity 300ms, transform 300ms;
}
.my-element-exit {
opacity: 1;
}
.my-element-exit-active {
opacity: 0;
transform: scale(0.9);
transition: opacity 300ms, transform 300ms;
}
Maybe react-magic can help you.