I'm trying do to [that](https://mverissimo.github.io/tweenslideshow/). In my application there is a first animation sequence with some listeneres inside. I have ensured to remove theses listeners at the end of this initial, pageEntering animation. 
Then I set the living listener for the component's lifecycle. 
The problem is that theses listeners increase and there is a kind of function looping on itself, *I assume because the listener triggers the function again and again until the program stop and you will see the image component just disappear when it occurs.*

So why is trigger again and again since I have ensured it should set the listeners only once? 

[Here my sandbox](https://codesandbox.io/s/026483m4n), theses listeners allow the further animation to trigger in order to create a smooth sequence, also you will observ there is several console.log to help you appreciate the repeating-loop's flow,

Here my reactJS snippet with the listener setting's chain:

```
 componentDidMount() { 
    var textFirstLine=this.refs.textFirstLine;
    var textSecondLine= this.refs.textSecondLine;

    this.setState({firstLineAnimation:enterDownAnimation})

    if(this.state.initialLoop){
      // configure events listeners
      textFirstLine.addEventListener(
        "animationend", 
        (e) => {  
          this.setState({
            initialDelay:null,
            secondLineAnimation:enterDownAnimation,
          })        
      });    

      textSecondLine.addEventListener(
        "animationend", 
      (e) => {
        // remove initial listeners
        textFirstLine.removeEventListener('animationend', null, false);
        textSecondLine.removeEventListener('animationend', null, false);
        this.setState({
        imageAnimation:enterSideAnimation,
        initialLoop:false
        // textOpacity:1
      }, 

      () => this.setComponentListener());
    })
  }} 
  setComponentListener=()=>{  
    // set component's lifecycle listeners
    var textFirstLine=this.refs.textFirstLine;
    var textSecondLine=this.refs.textSecondLine     
    var viewImage=this.refs.viewImage
    var pageView=this.refs.pageView; 

    console.log("SET LISTENER :)")
    textFirstLine.addEventListener(
      "animationend", 
      (e) => { 
        // textFirstLine.removeEventListener('animationend', null, false);          console.log("textFirstLine achieved")
        this.setState({secondLineAnimation:this.state.firstLineAnimation})        
    });  

    textSecondLine.addEventListener(
      "animationend", 
      (e) => { 
        // textSecondLine.removeEventListener('animationend', null, false);
        // console.log("textSecondLine achieved")
        this.imageAnimationPrepare(e)        
    });  

    viewImage.addEventListener(
      "animationend", 
      (e) => { 
        console.log("imageAnimation achieved")
        this.moveView(e)   

    });  

    pageView.addEventListener("transitionend",()=> { 
      console.log("ANIMATION END :)")
      this.updateSlideData();   
    }, false);  

  } 

```

Any hint would be great,
thanks