Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Animating React with GreenSock
.Header {
height: 50px;
max-width: 100%;
box-sizing: border-box;
border: 1px solid black;
color: white;
text-transform: uppercase;
background-color: rebeccapurple;
}
.isLoaded {
background-color: red;
}
import React, { Component } from 'react'
// import {findDOMNode} from 'react-dom'
import { TweenMax } from 'gsap'
import './Header.css'
class Header extends Component {
state = {
isLoaded: false,
isExpanded: false
}
componentDidMount() {
}
expand(el){
TweenMax.to(el, .5, {height: '100vh'})
}
shrink(el){
TweenMax.to(el, 1, {height: '10vh'})
}
fadeIn(el) {
TweenMax.to(el, .5, {autoAlpha: 1})
}
slideFromLeft(el){
TweenMax.from(el, 0.5, {x: -100})
}
handleClick(el) {
this.setState({isExpanded: !this.state.isExpanded})
this.state.isExpanded ?
this.shrink(this.headerRef) :
this.expand(this.headerRef)
}
render () {
return (
<div className={`Header ${this.state.isLoaded ? 'isLoaded' : ''}`}
ref={node => {this.headerRef = node}}
onClick={this.handleClick.bind(this)}
>
</div>
)
}
}
export default Header
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment