How to use the react-pose.div function in react-pose

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}
      
    );
  }
}

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({

import React from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import cardStyles from "./cards.module.scss";
import posed, { PoseGroup } from "react-pose";

const Container = posed.div({
  enter: { staggerChildren: 50 }
});

const Header = posed.div({
  enter: { x: 0, opacity: 1 },
  exit: { x: 50, opacity: 0 }
});

const Card = posed.div({
  enter: { y: 0, opacity: 1 },
  exit: { y: 50, opacity: 0 }
});

const Cards = props => {
  const { data } = props.cards;
  const countryCards = data.map(card => {

const Tick = posed.path({
  passive: {
    pathLength: ['x', clamp(0, 100), true]
  }
});

const xToProgress = pipe(interpolate([110, 20], [1, 0]), clamp(0, 1));

const IconContainer = posed.div({
  passive: {
    opacity: ['x', xToProgress, true],
    scale: ['x', xToProgress, true]
  }
});

const EmailContainer = posed.div({
  exit: { scaleY: 0, transition: tween },
  enter: { scaleY: 1, transition: tween },
  flip: {
    transition: tween
  }
});

const EmailContainerInner = posed.div({
  passive: {
    backgroundColor: ['x', v => (v >= 0 ? '#14D790' : '#fafafa'), true]
  }
});

class Email extends React.Component {
  x = value(0);
  hasDeleted = false;

import * as React from 'react';
import styled from 'styled-components';
import posed, { PoseGroup } from 'react-pose';
import { AppState } from '../../store';
import { connect } from 'react-redux';
import BounceLoader from 'react-spinners/BounceLoader';

import { Colors } from '../../config';

import Text from '../Text';

const AnimatedContainer = posed.div({
  enter: {
    opacity: 1,
  },
  exit: {
    opacity: 0,
  },
});

const Container = styled(AnimatedContainer)`
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 999;
  background-color: ${Colors.BACKGROUND};

render() {
    return (
      
        
          {this.state.items.map(key => (
            
              
            
          ))}
        
      
    );
  }
}

const Slidable = posed.div({
  draggable: 'x',
  dragEnd: {
    transition: ({ from, to, velocity }) =>
      velocity === 0
        ? spring({ from, to: 0, velocity, stiffness: 750, damping: 50 })
        : spring({
            from,
            to: velocity < 0 ? -500 : 500,
            velocity,
            stiffness: 750,
            damping: 50
          })
  }
});

const Tick = posed.path({

flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-start;
`

const List = styled.ul`
  display: inline-flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%;
  @media screen and (min-width: ${props => props.theme.responsive.medium}) {
    flex: 0 0 66%;
  }
`

const SideBar = styled(posed.div(appear))`
  width: 100%;
  @media screen and (min-width: ${props => props.theme.responsive.medium}) {
    flex: 0 0 32%;
    position: sticky;
    top: 1rem;
  }
`

const BlogList = props => {
  return (
    
      {props.children}
      
        
        

import React, {
    PureComponent,
} from 'react';
import PropTypes from 'prop-types';
import posed, { PoseGroup } from 'react-pose';
import returnAndClose from '~uiModules/helpers/returnAndClose';
import Loading from '~ui/views/Loading';

const StepContent = posed.div({
    enter: {
        x: 0,
        opacity: 1,
        transition: {
            x: { type: 'spring', stiffness: 100, damping: 50 },
            default: { duration: 330 },
        },
    },
    left: {
        x: '-50%',
        opacity: 0,
        transition: {
            x: { type: 'spring', stiffness: 100, damping: 50 },
            default: { duration: 330 },
        },
    },