RxTween

A small helper library to create animation-related RxJS Observables. Specify a start value, an end value, the duration, and an easing function, and you get an Observable emitting the interpolated values in intervals over time.

Get started

Installing

Available only as an NPM package.

npm install rxtween

RxTween has RxJS as an npm peerDependency. This means RxTween will include RxJS into your project only if it isn't yet in your project. A good practice is to specify both rxtween and rx as your npm dependencies in package.json.

Usage

import RxTween from 'rxtween';
 
let position$ = RxTween({
  from: 0,
  to: 20,
  duration: 1000,
  ease: RxTween.Exp.easeIn,
  interval: 20
});

RxTween is a factory function taking an options object as the only parameter, and returns an Rx.Observable emitting JavaScript Numbers. The options object takes properties from, to, duration, ease (optional, the default is Linear easing), and interval (optional).

How it works

RxTween() factory function returns an Rx.Observable.interval Observable mapped to the correct interpolated values according to from, to, and duration. This whole sequence of values lasts duration milliseconds.

Easing functions

RxTween.Linear.ease

|                    #
|                   # 
|                  #  
|                 #   
|                #    
|               #     
|              #      
|             #       
|            #        
|           #         
|          #          
|         #           
|        #            
|       #             
|      #              
|     #               
|    #                
|   #                 
|  #                  
| #                   
|#                    
+---------------------

RxTween.Power2.easeIn

|                    #
|                     
|                   # 
|                     
|                  #  
|                     
|                 #   
|                #    
|                     
|               #     
|              #      
|                     
|             #       
|            #        
|           #         
|          #          
|         #           
|        #            
|      ##             
|    ##               
|####                 
+---------------------

RxTween.Power3.easeIn

|                    #
|                     
|                     
|                   # 
|                     
|                  #  
|                     
|                     
|                 #   
|                     
|                #    
|                     
|               #     
|              #      
|                     
|             #       
|            #        
|          ##         
|         #           
|      ###            
|######               
+---------------------

RxTween.Power4.easeIn

|                    #
|                     
|                     
|                     
|                   # 
|                     
|                     
|                  #  
|                     
|                     
|                 #   
|                     
|                #    
|                     
|               #     
|              #      
|             #       
|            #        
|           #         
|        ###          
|########             
+---------------------

RxTween.Exp.easeIn

|                    #
|                     
|                     
|                     
|                     
|                   # 
|                     
|                     
|                     
|                  #  
|                     
|                     
|                 #   
|                     
|                #    
|                     
|               #     
|              #      
|            ##       
|         ###         
|#########            
+---------------------

RxTween.Back.easeIn

|                    #
|                     
|                     
|                     
|                   # 
|                     
|                     
|                     
|                  #  
|                     
|                     
|                 #   
|                     
|                     
|                #    
|                     
|               #     
|                     
|              #      
|                     
|#____________#       
+---------------------

RxTween.Bounce.easeIn

|                   ##
|                     
|                  #  
|                 #   
|                     
|                     
|                #    
|                     
|                     
|               #     
|                     
|                     
|                     
|                     
|              #      
|        ###          
|           #         
|       #             
|            #        
|   ####      #       
|###                  
+---------------------

RxTween.Circ.easeIn

|                    #
|                     
|                     
|                     
|                     
|                     
|                   # 
|                     
|                     
|                  #  
|                     
|                 #   
|                #    
|               #     
|              #      
|             #       
|            #        
|          ##         
|        ##           
|     ###             
|#####                
+---------------------

RxTween.Elastic.easeIn

|                    #
|                     
|                     
|                     
|                     
|                     
|                     
|                     
|                     
|                     
|                     
|                     
|                     
|                   # 
|                     
|                     
|                     
|                     
|              ##     
|             #       
|####___###___   ___  
+---------------------

RxTween.Sine.easeIn

|                    #
|                     
|                   # 
|                  #  
|                     
|                 #   
|                #    
|                     
|               #     
|              #      
|             #       
|                     
|            #        
|           #         
|          #          
|         #           
|        #            
|       #             
|     ##              
|   ##                
|###                  
+---------------------

Thanks

This project is a grateful recipient of the Futurice Open Source sponsorship program.

LICENSE

The MIT License (MIT)