Hi there,
I'm a newbie to both react and GSAP. I'm trying to get this working on react-native. I can get the block to display but nothing happens (no errors either) when I hit 'Animate'. Here is my code
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { TimelineLite } from 'gsap';
class TLine extends React.Component {
animate = () => {
var animation = new TimelineLite()
animation
.to(this.box, 1, { x: 200 })
.to(this.box, 1, { y: 200 })
.to(this.box, 1, { x: 0 })
.to(this.box, 1, { y: 0 })
}
render() {
return (
<View style={textStyles.container}>
<Button style={styles.button} onPress={this.animate} title = 'Animate' />
<View style={styles.box} ref={box => this.box = box} className="box" />
</View>
)
}
}
const styles = StyleSheet.create({
button: {
width: 200,
height: 45
// border: 'none',
// outline: 'none',
},
container: {
padding: 100,
},
box: {
marginTop: 10,
width: 100,
height: 100,
backgroundColor: '#ffc107',
borderRadius: 4
// boxShadow: '1px 1px 27px rgba(0, 0, 0, .3)'
}
})
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>This is a test for GSAP </Text>
<TLine />
</View>
);
}
}
Can anyone point to why it doesn't seem to work? Or, how to debug it since I don't see any errors?
Thanks.
