React Animations Snippets
A collection of VS Code snippets for quickly adding popular React animation patterns to your projects. This extension helps you insert animation imports and usage code with ease, streamlining your workflow when working with animated React components.
Features
- Insert import statements for animation libraries at the top of your file
- Add animation usage code at the cursor location
- Supports popular animation libraries (e.g., react-animations)
- Easy to customize and extend
Usage
- Install this extension in VS Code.
- Open a React component file.
- Type the snippet prefix (e.g.,
ra-bounce) and select the desired animation snippet.
- The import will be added to the top, and the animation code will be inserted at your cursor.
Snippet Reference
| Name |
Prefix |
Description |
| Glassmorphism Frosted Card |
ra-glass-frosted-card |
Glassmorphism frosted card effect |
| Neon Animated Border Card |
ra-neon-card |
Neon animated border card effect |
| 3D Tilt Card Hover |
ra-3d-tilt-card |
3D tilt card effect on hover |
| Animated Gradient Border Card |
ra-animated-gradient-card |
Animated conic gradient border card effect |
| Rotating Gradient Card |
ra-rotating-card |
Rotating gradient border card effect |
| Fade In |
ra-fade-in |
Fade in animation |
| Slide Up |
ra-slide-up |
Slide up animation |
| Scale In |
ra-scale-in |
Scale in animation |
| Image Morphing |
ra-morph |
Morphing blob effect (great for images/divs) |
| Glow Pulse |
ra-glow |
Glowing pulse effect |
| Wiggle |
ra-wiggle |
Wiggle animation |
| Bounce |
ra-bounce |
Bounce animation |
| Shimmer |
ra-shimmer |
Shimmer loading effect |
| Text Typing |
ra-typing |
Typing text effect |
| Rotate In |
ra-rotate-in |
Rotate in animation |
| Flip Y |
ra-flip-y |
Flip in Y axis animation |
| Drop Shadow Hover |
ra-shadow-hover |
Drop shadow on hover |
| Glassmorphism Card |
ra-glass-card |
Glassmorphism card effect |
| Tilt Hover |
ra-tilt-hover |
Tilt and scale on hover |
| Framer Motion Fade In (React) |
ra-fm-fade-in |
Fade in using Framer Motion (React) |
| Framer Motion Slide Up (React) |
ra-fm-slide-up |
Slide up using Framer Motion (React) |
| React Spring Scale In (React) |
ra-rs-scale-in |
Scale in using React Spring (React) |
| React Spring Morphing Image |
ra-rs-morph |
Morphing blob effect using React Spring |
| Shake |
ra-shake |
Shake animation |
| Pulse |
ra-pulse |
Pulse animation |
| Flip X |
ra-flip-x |
Flip in X axis animation |
| Framer Motion Staggered List |
ra-fm-stagger-list |
Staggered list animation (Framer Motion) |
| Framer Motion Hover Scale |
ra-fm-hover-scale |
Hover scale effect (Framer Motion) |
| React Spring Fade In (React) |
ra-rs-fade-in |
Fade in using React Spring (React) |
Example
import { bounce } from 'react-animations';
import Radium, { StyleRoot } from 'radium';
const styles = {
bounce: {
animation: 'x 1s',
animationName: Radium.keyframes(bounce, 'bounce')
}
};
<StyleRoot>
<div style={styles.bounce}>Bouncing!</div>
</StyleRoot>
Contributing
Feel free to submit issues or pull requests to improve or add new animation snippets.
License
See LICENSE for details.
For example if there is an image subfolder under your extension project workspace:
Tip: Many popular extensions utilize animations. This is an excellent way to show off your extension! We recommend short, focused animations that are easy to follow.
Requirements
If you have any requirements or dependencies, add a section describing those and how to install and configure them.
Extension Settings
Include if your extension adds any VS Code settings through the contributes.configuration extension point.
For example:
This extension contributes the following settings:
myExtension.enable: Enable/disable this extension.myExtension.thing: Set to blah to do something.
Known Issues
Calling out known issues can help limit users opening duplicate issues against your extension.
Release Notes
Users appreciate release notes as you update your extension.
1.0.0
Initial release of ...
1.0.1
1.1.0
Added features X, Y, and Z.
Working with Markdown
You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:
- Split the editor (
Cmd+\ on macOS or Ctrl+\ on Windows and Linux).
- Toggle preview (
Shift+Cmd+V on macOS or Shift+Ctrl+V on Windows and Linux).
- Press
Ctrl+Space (Windows, Linux, macOS) to see a list of Markdown snippets.
Enjoy!
