Package Exports

gsap-rn
gsap-rn/gsap-rn.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gsap-rn) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

GSAP-RN

Support for gsap: 3.0.0+. For older versions use https://github.com/tufik2/TweenMaxRN

This repository enable GSAP to work with ReactNative thanks to Direct Manipulation.
With this library is possible animate Styles and Transform properties.
Currently in RN there is not way to recover the current status of a style appied to an element, so is always important specify the initial params with gsap.set() before animate its.
The performance using Direct Manipulation is really good, specially when we compile our app in release version.

How use

Install gsap and gsap-rn

npm install gsap gsap-rn

import {gsap, Back} from 'gsap-rn';

componentDidMount() {  
    gsap.to(this.ref, {duration:1, style:{left:50}, transform:{rotate:90, scale:0.5}, 	ease:Back.easeInOut});  
}

<View ref={ref=> this.ref = ref} style={{width:100, height:100, backgroundColor:"#F00"}}></View>

Animating percentages

    timeline = gsap.timeline();
    timeline.set(this.bar, {style:{width:"0%"}});
    timeline.to(this.bar, {duration:1, style:{width:"100%"}, ease:Power2.easeInOut});

Animating colors

    timeline = gsap.timeline();
    timeline.set(this.box, {style:{backgroundColor:"#F00"}});
    timeline.to(this.box, {duration:1, style:{backgroundColor:"#F0F"}, ease:Power2.easeInOut});

AutoKillTween

If the app need unmount a component and It is executing an animation ReactNative will throw an updating in an unmontain component error. To offert a easy solution to It you can use AutoKillTween to force stop all animation before unmount.

// This method receive a tween, array of tweens, object with tweens, Class reference that contain all tweens references   
AutoKillTween.tweensOf(tween)

// If you don't want to worry about kill tween by tween, You can define AutoKillTween also like component and It will stop all animation automatically before unmount the component.
<View>
    <AutoKillTween tweens={this} />  
</View>

Here there is a code of an animation using AutoKillTween

import React, {Component} from 'react';
import {View, Text, TouchableOpacity, StyleSheet} from 'react-native';
import {gsap, Power2, Elastic, AutoKillTweens} from 'gsap-rn';

export default class Main extends Component {
    boxes = [];

    onPress(){
    // Using AutoKillTweens.tweensOf method to kill a specific tween
    AutoKillTweens.tweensOf(this.tl);
    // We mantain the reference of the tween directly in the Class
        this.tl = gsap.timeline();
        this.tl.to(this.boxes, {duration:1, transform:{y:-100, scale:0.8}, ease:Power2.easeInOut, stagger: {amount: 0.3}});
        this.tl.to(this.boxes, {duration:0.3, transform:{y:0, scale:1 }, ease:Elastic.easeOut, stagger: {amount: 0.3}});
    }

    render() {
        return (
        <View style={{flex:1, justifyContent:"center", alignItems:"center"}}>
            /* We pass the Class reference to AutoKillTween Componet. 
                If this component will unmount, AutoKillTween will end all tween references directy linked to the Class.
             */
            <AutoKillTweens tweens={this} />
            <View style={{flexDirection:"row"}}>
                <View ref={ ref=>this.boxes.push(ref) } style={styles.box} />
                <View ref={ ref=>this.boxes.push(ref) } style={styles.box} />
                <View ref={ ref=>this.boxes.push(ref) } style={styles.box} />
            </View>
            <TouchableOpacity onPress={this.onPress.bind(this)}>
                <Text ref={ref=>this.text = ref} style={[styles.button, {marginTop: 30}]} >Touch Me</Text>
            </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    box:{width:75, height:75, backgroundColor: "#f0ad4e", marginHorizontal:5},
    button:{fontSize:20, backgroundColor: "#337ab7", paddingVertical:10, paddingHorizontal:20, color:"#FFF", borderRadius:5}
})

animation

DEMOS

DOWNLOAD APK

animation