vercel / React Keyframes
Create frame-based animations in React
Stars: ✭ 561
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Keyframes
DashcamCleaner
Censor identifiable information in videos., in particular dashcam recordings in Germany.
Stars: ✭ 20 (-96.43%)
Mutual labels: frame
Ngx Page Scroll
Animated scrolling functionality for angular written in pure typescript
Stars: ✭ 422 (-24.78%)
Mutual labels: animate
dataflow-bundle
Data processing framework inspired by PortPHP
Stars: ✭ 13 (-97.68%)
Mutual labels: frame
Sequent
A simple continuous animation library for Android UI.
Stars: ✭ 263 (-53.12%)
Mutual labels: animate
Traceback with variables
Adds variables to python traceback. Simple, lightweight, controllable. Debug reasons of exceptions by logging or pretty printing colorful variable contexts for each frame in a stacktrace, showing every value. Dump locals environments after errors to console, files, and loggers. Works in Jupyter and IPython. Install with pip or conda.
Stars: ✭ 509 (-9.27%)
Mutual labels: frame
Fg
Rendering abstraction which describes a frame as a directed acyclic graph of render tasks and resources.
Stars: ✭ 390 (-30.48%)
Mutual labels: frame
samanemvc
PHP Framework using MVC model developped by Ngor SECK!
Stars: ✭ 32 (-94.3%)
Mutual labels: frame
frame-by-frame
Frame By Frame - Chrome Extension. Move your mouse cursor over any video and use keyboard arrows to switch frames.
Stars: ✭ 38 (-93.23%)
Mutual labels: frame
UWP-Flow-Frame
Flow Frame is a new and improved Frame control. This builds upon the default frame control by providing high-performance page transition animations powered by the composition layer. Fresh, new animations will be used by default, with options to configure the animations or even create your own custom animations (from scratch).
Stars: ✭ 14 (-97.5%)
Mutual labels: frame
Deviceframe
📱 Put device frames around your mobile/web/progressive app screenshots.
Stars: ✭ 507 (-9.63%)
Mutual labels: frame
sinus-studio
Draws and animates a 3D spirograph-like curves.
Stars: ✭ 19 (-96.61%)
Mutual labels: animate
Swiftui
Examples projects using SwiftUI released by WWDC2019. Include Layout, UI, Animations, Gestures, Draw and Data.
Stars: ✭ 3,579 (+537.97%)
Mutual labels: animate
Kotlinpleaseanimate
Kotlin, please, can you animate my views ?
Stars: ✭ 541 (-3.57%)
Mutual labels: animate
React Motion Layout
🦸 Beautiful immersive React hero animations.
Stars: ✭ 509 (-9.27%)
Mutual labels: animate
React Keyframes
A React component for creating frame-based animations.
Example
The following example will render contents in Frame
one at a time every 500 ms.
import { Keyframes, Frame } from "react-keyframes";
function MyComponent() {
return (
<Keyframes>
<Frame duration={500}>This</Frame>
<Frame duration={500}>This is</Frame>
<Frame duration={500}>
This is <em>animated</em>.
</Frame>
</Keyframes>
);
}
Usage
Firstly, install the package:
$ npm install --save react-keyframes
API
Keyframes
<Keyframes { component = 'span' } />
- Use
import { Keyframes } from 'react-keyframes'
- The
component
prop specifies what componentKeyframes
renders as. You can pass the following:- a React Component (i.e.
<Keyframes component={myComponent} />
) - a React Fragment (i.e.
<Keyframes component={React.Fragment} />
) - an HTML tag represented as a string (i.e.
<Keyframes component='div' />
) - If nothing is passed, it defaults to "span"
- a React Component (i.e.
- Any additional, user-defined properties will become properties of the rendered component.
- It must have only
Frame
as children. - Example:
import { Component } from 'react';
import { Keyframes, Frame } from 'react-keyframes';
class extends Component {
render () {
return <Keyframes component="pre" delay={300} className="animation-test">
<Frame>foo</Frame>
<Frame>bar</Frame>
</Keyframes>;
}
}
Frame
<Frame { duration = 0 } />
- Use
import { Frame } from 'react-keyframes'
- The
duration
prop specifies the length of time that a frame should show (millisecond). - You have to put
Frame
in the order you want them animated. - Example:
import { Component } from 'react';
import { Keyframes, Frame } from 'react-keyframes';
class extends Component {
render () {
return <Keyframes>
<Frame duration={100}>foo</Frame>
<Frame duration={200}>bar</Frame>
</Keyframes>;
}
}
Contributing
- Run
npm run build
to transpile the source code - Before submitting a PR, please run
npm run test
- Please be welcoming
Author
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].