React-spring: Two component playing one by one and last one stays

[jefflung]

import React, { Component } from "react";
import { AnimationSequence, Animatable } from 'react-web-animation';

export default class profile extends Component {

  constructor() {
        super();
        this.state = {
            currentTime: 0,
            playState: 'running'
        };
        this.isRemovable = false ;
    }

    getKeyFrames() {
        return [
            { transform: 'scale(1)',    opacity: 0,     offset: 0 },
            { transform: 'scale(.5)',   opacity: 0.5,   offset: 0.3 },
            { transform: 'scale(.667)', opacity: 0.667, offset: 0.7875 },
            { transform: 'scale(.6)',   opacity: 0,   offset: 1 }
        ];
    }

    getKeyFrames1() {
        return [
            { transform: 'scale(.1)',    opacity: 0,     offset: 0 },
            { transform: 'scale(.5)',   opacity: 0.5,   offset: 0.3 },
            { transform: 'scale(.667)', opacity: 0.667, offset: 0.7875 },
            { transform: 'scale(.6)',   opacity: 0.6,   offset: 1 }
        ];
    }


    getTiming( duration ) {
        return {
            duration,
            easing: 'ease-in-out',
            delay: 0,
            iterations: 1,
            direction: 'alternate',
            fill: 'forwards'
        };
    }

 render() {
  return(
  <div className="page_profile">
  <AnimationSequence
           playState={this.state.playState}
           currentTime={this.state.currentTime}
         >
         <Animatable.div
                   id="1"
                   keyframes={this.getKeyFrames()}
                   timing={this.getTiming(2000)}

                 >
      <h1>Profile</h1>
        <p>Hello from the profile page!</p>

        </Animatable.div>
                <Animatable.div
                  id="2"
                  keyframes={this.getKeyFrames1()}
                  timing={this.getTiming(4000)}
                  style={{opacity:0}}
                >

        <h1>Profile 2</h1>
        <p>Goodbye from the profile page!</p>

        </Animatable.div>

           </AnimationSequence>

  </div>
  );
 }
}

Hi Paul, I would like to ask how can I acieve that two component appears one by one then the last one stays on screen? Above is code I wrote with react-web-animation, could you tell me how to achieve the effect I said with React-spring? As I want the first component to unmount before the second one appears. Thanks, and please excuse my simple problem as I am new to coding.

[drcmda]

Would this help? https://codesandbox.io/s/xjxpo462o4

Otherwise, i tried putting your example into a codesandbox, but couldn't make it run. To be sure i'd have to see the effect you're going for first visually.

[jefflung]

Thanks Paul for your demo, but it's different from the effect I try to produce. I cannot upload my files to codesandbox, could you check it with this link http://react_gsap2.surge.sh/ ? and my github repository is https://github.com/jefflung/react_gsapV2 . Thanks a lot.

[drcmda]

Time based animation is now possible (4.0.5), see the main page for a small explanation. But i'm still trying to figure out what to do with keyframes. Right now the script isn't very powerful and animations can't be stopped once set in motion, until it reaches its end. It will probably go into a direction like above, though i'm not sure about offsets and stuff, ... this is kind of the reason why react-motion threw time-based out completely, because it makes UI's look messy and uneven, also hard to control. We'll see ... always open to input and ideas regarding this stuff. 🙂

[jefflung]

Thanks for the explanation. However, could you suggest or give me hint that, how can I remove/unmount an element with setting a duration? just like my sample, the first animation which has disappeared, thanks :)

[drcmda]

@jefflung you can check out time based animations (on the front page), keyframes have also gotten a major update.