addAnimation is not a function?

[jesperlandberg]

Hi,

I get the error message "this.addAnimation(btnEnter) is not a function".

What is wrong with my code?

import React from 'react'
import { render } from 'react-dom'
import GSAP from 'react-gsap-enhancer'

class ProjectBtn extends React.Component {

    constructor(props){
        super(props);

        this.state = { hover: false }
    }

    mouseOver(){
        this.setState({ hover: true })

        const controller = this.addAnimation(btnEnter)
    }

    mouseOut(){
        this.setState({ hover: false })
    }

    render(){
        return (
            <a href="#" onMouseOver={this.mouseOver.bind(this)} onMouseOut={this.mouseOut.bind(this)} className="case-btn js-case-btn" data-project-id={this.props.key}>
                <span className="case-btn__title js-case-btn__title">{this.props.name}</span>
                <span className="case-btn__mask js-case-btn__mask"></span>
            </a>
        )
    }

}

function btnEnter({target}) {
    const mask = target.find('.js-case-btn__mask')
    const tlEnter = new TimelineLite({ paused: true })

    tlEnter
        .set(mask, { transformOrigin: "right" })
        .to(mask, 0.65, { scaleX: 0, ease: Expo.easeOut })
        .to(mask, 0.15, { alpha: 0 }, "-=0.15")

    return tlEnter.restart()
}

export default GSAP()(ProjectBtn)

[azazdeaz]

I don't se any problem in this piece of code :(, did you try to check what this is if it is not what it should be?

[azazdeaz]

Hi, did you managed to resolve this problem?

[mmintel]

Hi! I have the exact same error:

My code:

import React from 'react';
import GSAP from 'react-gsap-enhancer';
import { TimelineMax } from 'gsap';

import AccountView from './view';
import AuthService from '../../services/AuthService';

function appearAnim({target}) {
  // const duration = 0.5;
  // return new TimelineMax()
  //   .to()
}

function errorAnim({target}) {
  // const duration = 0.5;
  // return new TimelineMax()
}

class Account extends React.Component {
  constructor(props) {
    super(props);
    console.log(this)
    this.errorAnim = this.addAnimation(errorAnim);
    this.state = {
      isAccountMenuVisible: false,
      isSignUpVisible: true,
      error: null,
    }
  }

  componentDidMount() {
    this.addAnimation(appearAnim);
  }

  handleSignIn = (e) => {
    const email = e.target.elements['email'].value.trim();
    const password = e.target.elements['password'].value.trim();
    e.preventDefault();
    AuthService.signIn(email, password);
  }

  handleSignUp = (e) => {
    const email = e.target.elements['email'].value.trim();
    const password = e.target.elements['password'].value.trim();
    e.preventDefault();
    AuthService.signUp(email, password).then(() => {
      AuthService.signIn(email, password);
    }).catch((error) => {
      this.setState({
        error
      });
    });
  }

  showSignUp = (e) => {
    this.setState({
      isSignUpVisible:  true
    });
    e.preventDefault();
  }

  showSignIn = (e) => {
    this.setState({
      isSignUpVisible:  false
    });
    e.preventDefault();
  }

  render() {
    const { isSignUpVisible, isAccountMenuVisible, error } = this.state;
    const { styles } = this.props;
    return(
      <AccountView
        isSignUpVisible={isSignUpVisible}
        handleSignIn={this.handleSignIn}
        handleSignUp={this.handleSignUp}
        showSignUp={this.showSignUp}
        showSignIn={this.showSignIn}
      />
    )
  }
}

export default GSAP()(Account);

Browser throws:

TypeError: _this.addAnimation is not a function

console.log on "this" shows there is "removeAnimation" method but no addAnimation.

Any idea?

[hakatashi]

@mmintel Today I also had the same problem and found that addAnimation can't be inside constructor. It works well in componentDidMount.

[mmintel]

I ended up using GSAP without plugin like described here https://medium.com/@marcmintel/react-meets-gsap-c6dd82edeb72