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}
})

DEMOS

DOWNLOAD APK