import TweenLite, {Power3} from 'gsap'
import TimelineLite from 'gsap/TimelineLite'

export const enterAnimation = ({release}) => {
  const inner = document.querySelector('.example01__inner')
  const cover = document.querySelector('.example01__cover')
  const itemArr = Array.from(cover.querySelectorAll('.example01__cover__item'))

  new TimelineLite()
    .to(cover, .8, {
      opacity: '1'
    })
    .to(inner, 0, {
      opacity: 1,
      onComplete: () => {
        itemArr.forEach((item, index) => {
          TweenLite.to(item, 1, {
            ease: Power3.easeInOut,
            x: '100%',
            delay: index * 0.05,
            onComplete: () => {
              if (index + 1 === itemArr.length) {
                cover.style.display = 'none'
                release() // This will be called when the animation ends
              }
            }
          })
        })
      }
    })
}

export const leaveAnimation = ({release}) => {
  const inner = document.querySelector('.example01__inner')
  TweenLite.to(inner, .3, {
    opacity: 0,
    onComplete: () => {
      release() // This will be called when the animation ends
    }
  })
}

import React from 'react'
import {enterAnimation, leaveAnimation} from './animation_example01'
import {useTransition} from 'react-queue-router'

const Example01 = () => {
  useTransition(enterAnimation, leaveAnimation)
  
  return (
    <div className='example01'>
      <div className='example01__inner'>
        {/* content */}
      </div>
      <div className='example01__cover'>
        <span className='example01__cover__item'/>
        <span className='example01__cover__item'><span>Example01</span></span>
        <span className='example01__cover__item'><span>Example01</span></span>
        <span className='example01__cover__item'/>
      </div>
    </div>
  )
}

export default Example01