Cristiano

Adding to Steven's example as I believe it works really well. This is how I did it, please let me know of any caveats you find if you try this approach as I'm still experimenting with it. 1. Install gsap using npm or yarn. npm install gsap yarn add gsap 2. Next import TweenMax (or anything else you need) into your component. Create an animation and pass it as a ref to the element you want to animate. import React, { Component } from 'react' import { StyleSheet, css } from 'aphrodite' // Importing TweenMax and the Bounce ease. You need to import other things from it as needed. import { TweenMax, Bounce } from 'gsap' // Create a component as usual. export default class UserCard extends Component { render() { return( // Pass your animation as ref. (see react docs). <div ref={(card) => { TweenMax.to(card,2,{rotation:360, ease:Bounce.easeOut}); }} className={css(styles.userContainer)}> <p>User info here.</p> </div> ) } } // Style your components or add other stuff as usual. // .css stylesheets work as well. const styles = StyleSheet.create({ userContainer: { display: 'flex', flexDirection: 'column', width: '250px', borderRadius: 7, border: '1px solid rgba(0, 0, 0, 0.2)', margin: '0px', boxShadow: '2px 2px 2px 1px rgba(0, 0, 0, 0.2)', marginBottom: '20px', background: "#fff", } }) // This approach let's you export default Redux's connect() Known issues: If a style is applied using styled components, GSAP won't be able to change it. A solution could be using .css stylesheets.