How to make an animation in sequence before a transition?

Use fullpage

My code - https://jsfiddle.net/fbyx9kpg/

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var delay = 1000;
var timeoutId;
var animationIsFinished = false;

new fullpage('#fullpage', {
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
  onLeave: function(origin, destination, direction) {

    $('.block').addClass('animate');
    clearTimeout(timeoutId);

    timeoutId = setTimeout(function() {
      animationIsFinished = true;

      fullpage_api.moveTo(destination.index + 1);
    }, delay);

    return animationIsFinished;

  },
});

<!-- language: lang-css -->

.section {
    text-align: center;
    font-size: 3em;
    font-family: arial;
}

.block,
#element{
    transition: all 2s ease;
}

.block {
  width: 100px;
  height: 100px;
  background-color: #f00;
}

.block.animate {
  transform: translateX(100px);
}

#element.animate{
    margin-left: 250px;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/fullpage.js@4.0.19/dist/fullpage.min.js"></script>
<link href="https://unpkg.com/fullpage.js@4.0.19/dist/fullpage.min.css" rel="stylesheet"/>
<div id="fullpage">
  <div class="section">
    <div class="block"></div>
    Section 1
  </div>
  <div class="section">
    <div class="block"></div>
    Section 2
  </div>
  <div class="section">
    <div class="block"></div>
    <div id="element">
      Section 3
    </div>
  </div>
  <div class="section">
    <div class="block"></div>
    Section 4
  </div>
</div>

<!-- end snippet -->

I'm trying to make an animation in turn, i.e.

section1 - scroll - animation - end animation - scroll section 2

section2 - scroll - animation - end animation - scroll section 3

section3 - scroll - animation - end animation - scroll section 4

section4 - scroll - animation - end animation - if up to scroll section 3

Now animation happens for all sections at once

Thanks in advance, any help would be appreciated

The transition only happens once, because it starts when the "block" class gets added to the element.

To manipulate the offset every time the callback is evoked, you can replace the following line

$('.block').addClass('animate');

with

$('.block').css("margin-left", destination.index * 100 + "px")

Here we use the jQuery .css() method to set the margin-left value. The value now depends on the value of destination.index.

Alternatively, you could also use something like:

$('.block').css("transform", `translateX(${destination.index * 100}px`)

https://jsfiddle.net/ybwpxz1v/