Jump to content
GreenSock

ignorant

Members
  • Posts

    1
  • Joined

  • Last visited

ignorant's Achievements

Newbie

Newbie (1/14)

0

Reputation

  1. ignorant

    React and GSAP

    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.
×