react-gsap-enhancer + routing transitions between pages

[davidbastian]

Hi Polgar.

I have a question about how to use your component with a routing between pages... and also if that is is possible with different kind of transitions... just with gsap.. not css... I did that in angular .. and it was really easy... but with react it have been years more hard for me...

I have use react-motion.. and works fine for me doing the routing + transitions.. but I really want to use gsap power....

... I would like to ask.. if you can make a demo example with routing? I am designer and it is hard for me create that.

also if you know how to trigger events with routing and react.. like on mouse-wheel,,.. or some like infinite scroll...

David.

[azazdeaz]

Hi @davidbastian,

Thanks for this issue, this is a great use case, i will put together a demo on these as soon as i can!

[Geoide]

What about this? Is there something? I'm interested.

[azazdeaz]

Hi, i started to work on it here: https://github.com/azazdeaz/react-gsap-enhancer-react-router-example

Basically there is two way to do this:

1. You can handle more routes with the same component, listen for the for the routing props changes inside the component, and start the GSAP animations accordingly.
2. Use the react-addons-transition-group and its lifecycle methods to start animations and keep leaving components mounted until the animations finish.

[Geoide]

Thanks @azazdeaz , I was already using react-gsap-enhancer and your help is very useful for me :)

[azazdeaz]

Hey, now there is a demo about using TransitionGroup: http://azazdeaz.github.io/react-gsap-enhancer/#/demo/using-transition-group

[jesperlandberg]

@azazdeaz Is it possible to get an example on how http://azazdeaz.github.io/react-gsap-enhancer/#/demo/using-transition-group?_k=9t3d27 would be done using es6 and React.Component? Not the full demo just the componentEnter and componentLeave + animation functions parts? Would be really grateful for this.

[azazdeaz]

Hi @jesperlandberg, it should be something like this:

@GSAP()
class Circle extends React.Component {
  componentWillEnter(callback) {
    this.addAnimation(appearAnim, {callback: callback})
  }
  componentWillLeave(callback) {
    this.addAnimation(leaveAnim, {callback: callback})
  }
  ...

[jesperlandberg]

@azazdeaz thanks for the quick reply.

Would you mind checking what is wrong here? the routing works but nothing is animated, do I have do define the animation functions outside the class rather than as methods inside the class?

import React from 'react'
import { render } from 'react-dom'
import GSAP from 'react-gsap-enhancer'
import ReactTransitionGroup from 'react-addons-transition-group'

class About extends React.Component {

    constructor(props) {

        super(props)

    }

    componentWillEnter(callback) {

        this.addAnimation(this.animateIn, {callback: callback})

    }

    componentWillLeave(callback) {

        this.addAnimation(this.animateOut, {callback: callback})

    }

    animateIn(utils) {

        return TweenMax.from(utils.target, 1, { alpha: 0 })

    }

    animateOut(utils) {

        return TweenMax.to(utils.target, 1, { alpha: 0 })

    }

    render(){
        return (
            <ReactTransitionGroup>
                <div className="page page--about">
                    <div className="page__inner">
                        <p>About</p>
                    </div>
                </div>
            </ReactTransitionGroup>
        )
    }

}

export default GSAP()(About)

[azazdeaz]

I think the alpha in the animateIn should be 1, the rest of it seems good to me :)

[jesperlandberg]

@azazdeaz hmm I think the tweens are fine (it's from 0 on animateIn =) ), however the enter/leave methods doesn't seem to fire, put a console.log inside them which isnt shown in the console, so I must be missing something, I have no idea what tho, react newb=/

[iDVB]

Thanks for this @azazdeaz. However, for my usecase, I need to animate things in a component that could be both components and flat html. Besides, looking at your TransitionGroup example it assumes that the elements being animated will have the animation IN them.

If I have a VideoPlayer component (one I did not write) and I just want to animate it.... this example would not work, no?

Alternative? I have things working to do a this.context.router.setRouteLeaveHook, stop the route from happening and start my exit animation with this.anim.tweenTo('exit'). However, there is no callback there. If there was, I could just call the original intended route once complete.

[iDVB]

bump?

[azazdeaz]

Yes, you will have to wrap your components to get them work with the transition group. like here: http://azazdeaz.github.io/react-gsap-enhancer/#/demo/using-transition-group

(Sorry but i did not understand your example with setRouteLeaveHook)

[iDVB]

Has anyone gotten GSAP + TransitionGroup to work with React-Routerv2/3 and using ES6 syntax? I've yet to see an example of these working together and been unsuccessful in all my attempts.

I can get things rendering and routing.... but the hooks are never called eg. componentWillEnter

@gaearon wrote that people we having problems getting these hooks to fire when using stateless function components. Additionally, that TransitionGroup might be deprecated in the near future.

I'm less concerned about the deprecation then the fact that I might be stuck in a known issue with TransitionGroup. I'm not entirely sure what conditions would cause that scenario but I'm still unable to get it to work on our project.

[silenzium]

@iDVB Have you found a solution for your problem with the setRouteLeaveHook or any other way to transition between router changes with gsap?

[iDVB]

@silenzium Unfortunately, we decided not to use gsap-enhancer and instead use GSAP directly and use the deprecated (or soon to be) ReactTransitionGroup.

[silenzium]

@iDVB thanks I will also try to get it working without gsap-enhancer!