React-Simple-Animate

React UI animation made easy 

React Simple Animate Logo - UI Animation Made Simple

React Simple Animate

Features:

  • Animation from style A to B
  • CSS keyframes animation
  • Chain up animation sequences
  • Tiny size without other dependency

Install

$ npm install react-simple-animate

Docs

Quickstart

<span class="token keyword">import</span> react <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Animate<span class="token punctuation">,</span> AnimateKeyframes<span class="token punctuation">,</span> AnimateGroup <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-simple-animate'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> props <span class="token operator">=</span> <span class="token punctuation">{</span>
    startStyle<span class="token punctuation">:</span> <span class="token punctuation">{</span> opacity<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span>
    endStyle<span class="token punctuation">:</span> <span class="token punctuation">{</span> opacity<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
        <span class="token comment">// This example demonstrate animate individual element.</span>
JavaScript

React simple animate


        

        <span class="token comment">// This example demonstrate animate keyframes with individual element.</span>
JavaScript

React simple animate with keyframes


        

        <span class="token comment">// This example demonstrate animate group of animation with sequenceIndex.</span>
JavaScript

Next animation below:

JavaScript

Final animation below:


            
        
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
JavaScript

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.