How to use react-pose - 10 common examples

font-size: 36px;
  font-family: Popmotion Headline;
  letter-spacing: -2px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
  opacity: 0;
  display: inline-block;
  transform-origin: 0% 100%;

  ${media.medium`
  font-size: 28px;
  letter-spacing: -1.5px;`} ${media.small`
  font-size: 24px;
  letter-spacing: -1px;`};
`;

const Word = styled(posed.span({}))`
  display: inline-block;
`;

// TODO make a new npm module for this
class AnimatedText extends React.Component {
  constructor(props) {
    super(props);
    this.words = props.text.split(' ');
    this.chars = this.words.map(word => word.split(''));
    this.numChars = this.words.reduce((count, word) => count + word.length, 0);
  }

  render() {
    let i = -1;
    return (
      <h2></h2>

render() {
    const { children, location } = this.props;

    const RoutesContainer = posed.div({
      enter: { opacity: 1, delay: timeout, delayChildren: timeout },
      exit: { opacity: 0 },
    });

    // To enable page transitions on mount / initial load,
    // use the prop `animateOnMount={true}` on `PoseGroup`.
    return (
      
        {children}
      
    );
  }
}

flex-grow: 1;
  }
  > .ui.button {
    border-radius: 0;
  }
  > .ui.button:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  @media only screen and (min-width: 650px) {
    flex-direction: row;
    flex-grow: 0;
  }
`

const SortByContainer = posed(SortByContainerStyles)({
  enter: { width: 'auto', opacity: 1 },
  exit: { width: 0, opacity: 0 }
})

const ArticleImages = styled.div`
  a {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 5px;
    /* max-height: 100px; */
    > img {
      max-height: 100px;
    }
    &:last-child {
      margin-right: 0;
    }

// const SubscriberInfoStyled = styled.div`
//   background-color: rgba(32,34,37,0.6);
//   box-shadow: 0 2px 0px 0 rgba(0,0,0,0.2) !important;
//   padding: 15px 20px;
//   border-radius: 3px;
// `

const SubscriberInfoStyled = styled(Wrapper)`
  /* background-color: rgba(32,34,37,0.6); */
  box-shadow: 0 2px 0px 0 rgba(0,0,0,0.2) !important;
  padding: 15px 20px;
  border-radius: 3px;
`

const SubscriberInfo = posed(SubscriberInfoStyled)({
  enter: { opacity: 1, maxHeight: '730px' },
  exit: { opacity: 0, maxHeight: 0 }
})

const SubscriberFilterTable = posed.div({
  enter: { scale: 1, opacity: 1, maxHeight: '688px' },
  exit: { scale: 0, opacity: 0, maxHeight: 0 }
})

const AddSubscribersInputs = styled.div`
  display: flex;
  flex-direction: column;
  .ui.dropdown:first-child {
    flex-grow: 1;
    margin-right: 0;
    margin-bottom: 1em;

margin-bottom: 5px;
    /* max-height: 100px; */
    > img {
      max-height: 100px;
    }
    &:last-child {
      margin-right: 0;
    }
  }
`

const ArticleStyle = styled.div`
  word-break: break-all;
`

const PosedDiv = posed(ArticleStyle)({
  enter: { opacity: 1 },
  exit: { opacity: 0 }
})

const PlaceholderTitle = styled(SectionSubtitle)`
  margin-top: 1em;
  /* color: white; */
`

const StatusMessage = styled.div`
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  margin: 25px 0;

padding: 0 0 1em;
  height: 410px;
`

const EmbedFieldBoxStyles = styled(Wrapper)`
  display: inline-block;
  flex-shrink: 0;
  margin-right: 30px;
  /* height: 100%; */
  overflow: hidden;
  > div {
    width: 260px; /* Counts the 20px padding from Wrapper */
  }
`

const EmbedFieldBox = posed(EmbedFieldBoxStyles)({
  enter: { opacity: 1, width: '300px', transition: { duration: 200 } },
  exit: { opacity: 0, width: 0, transition: { duration: 200 } }
})

const AddEmbedFieldBox = styled(EmbedFieldBoxStyles)`
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-right: 0;
  width: 300px;
  height: 100%;
`

const EMBED_FIELD_KEYS = ['title', 'value', 'inline']

opacity: 0,
    transition: { type: 'spring' }
  },
  enter: {
    y: 0,
    opacity: 1,
    transition: { type: 'spring' }
  },
  exit: {
    y: -30,
    opacity: 0,
    transition: { type: 'spring' }
  }
}

const Item = posed.li(itemProps)

// https://popmotion.io/pose/api/posegroup/
const TransitionGrid = ({ visible, items, removeItem }) => {
  return (
    
      {visible && (
        
          
            {items.map(item => (
               removeItem(item)}
              >
                <div>✕</div>
                <div>{item}</div>

function LogoUnit({ minimal }) {
  const { basics } = useResume()
  const Animation = posed.div(moveInBottom)

  return (
    
      
        
        <h1>
          {basics.name.toLowerCase()}
        </h1>
        <p>
          {basics.label.toLowerCase()}
        </p>
      
    
  )
}

color: 'white',
    [smaller(breakpoints.phone)]: {
      maxWidth: 450,
      right: 0,
      left: 0,
      borderRadius: 0
    }
  },
  when('visible', {
    transform: `translateY(0)`,
    opacity: 1
  })
);

export const Overlay = emotion(
  pose.div({
    enter: { opacity: 1 },
    exit: { opacity: 0 }
  })
)(
  {
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    position: 'fixed',
    top: 0,
    left: 0,
    ...zIndexFor(ELEMENTS.OVERLAY),
    height: '100vh',
    width: '100vw'
  }
);

export const OverLimitText = emotion.div({