<div id="fullpage">
    <div class="section has-animation">
            Section 1
           <img id="img" class="image" src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=620&quality=85&dpr=1&s=none">
    </div>
    <div class="section">
        <div class="slide" data-anchor="slide1">Section 2.1</div>
        <div class="slide" data-anchor="slide2">Section 2.2</div>
    </div>
    <div class="section">Section 3</div>
    <div class="section">Section 4</div>
</div>

.section {
  text-align:center;
  font-size: 3em;
}
.box{
  position:relative;
}

.image{
  position:absolute;
  left:0;
  top:0;  
  width:538px;  
  height:190px;
}

var delay = 2000; //milliseconds
var timeoutId;
var animationIsFinished = false;


new fullpage('#fullpage', {
  licenseKey: 'YOUR KEY HERE',
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
  beforeLeave: function(origin, destination, direction){
    console.log("onLeave..." + origin.item.classList.contains('has-animation'));
    if(origin.item.classList.contains('has-animation')){
      if(origin.index === 0){
        animateSection1(origin, direction);
      }
      return  false;
    }
    return true;  
  }
});

function animateSection1(origin, direction){
   console.log("animateSection1: " + direction);
  gsap
    .to(".image", 2, {rotation:"+=360"})
    .eventCallback("onComplete", function(){
        console.log("on complete...");
        origin.item.classList.remove('has-animation');
        if(direction === 'down'){
          fullpage_api.moveSectionDown();
        }else if(direction === 'up'){
          fullpage_api.moveSectionUp();
        }
    });

  
}