Animation using both <Transition> & <Tween> in React

[Kona]

I'm new to GSAP and am trying to both have an Image Component <Transition> and have an onHover animaiton using Tween. I have both of them working although I can't use them both. I don't know how to use <transition> unless its within an object returning a <transition>. 

Can you use Tween within an Object or does it have to be Component level. Suggestions? 

Feel free to use my github work in progress for more info. Please be gentle with me (I couldn't get Codepen to work)

const Ball = props => {

    const url = `/imagines/${props.index + 1}_ball.png`;

    const { in: show, remove, card } = props;

 

    return <Transition

        timeout={1000}

        mountOnEnter

        unmountOnExit

        appear

        in={show}

        addEndListener={(node, done) => {

            TweenMax.to(node, 0.35, {

                y: 0,

                autoAlpha: show ? 1 : 0,

                onComplete: done,

                delay: !show ? 0 : card.init ? props.index * 0.5 : 0

            });

        }}

    > //other stuff

 

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

Unfortunately is a bit hard to figure out what is your issue with just the snippet you posted.

 

Could you please create a live sample either on Stackblitz or Codesandbox in order to see a live editable sample of what you're trying to do?

 

For what I see in your snippet everything is working fine. My best guess is that you want to create a hover animation using GSAP in some DOM element that resides inside the <Transition> component. If that is the case you could create a variable to hold a reference to the DOM node and a couple of methods to create and run the mouse over/out animations.

 

const Ball = props => {
  let myElement = null;
  
  const onMouseEnterHandler = () => TweenLite.to(myElement, 0.2, {color: "#FF00FF"});
  
  const onMouseLeaveHandler = () => TweenLite.to(myElement, 0.2, {color: "#000000"});
  
  return (<Transition>
    <div ref={div myElement = div}></div>
  </Transition>);
};

Even though there is nothing wrong with this approach, I'd suggest you to use either a class component or hooks in order to toggle a mouse enter/leave animation that is created only once instead of creating a new one each time the event happens. A bit like this:

class App extends Component {
  constructor(props) {
    super(props);

    this.myElement = null;
    this.hoverTween = null;

    this.toggleHoverTween = this.toggleHoverTween.bind(this);
  }

  componentDidMount() {
    this.hoverTween = TweenLite.to(this.myElement, 0.25, {
      color: "#FF00FF"
    }).reverse();
  }

  toggleHoverTween() {
    this.hoverTween.reversed(!this.hoverTween.reversed());
  }

  render() {
    return (
      <Transition>
        <div
          ref={e => (this.myElement = e)}
          onMouseEnter={this.toggleHoverTween}
          onMouseLeave={this.toggleHoverTween}
        >
        </div>
      </Transition>
    );
  }
}

 

Happy Tweening!!