CODEWITHSUNDEEP
javascripthtmlcssfullpage.js
Ivan Simonov
Ivan Simonov

Reputation: 55

How to make an animation in sequence before a transition?

Use fullpage

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

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;

  },
});
.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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/fullpage.min.js"></script>
<link href="https://unpkg.com/[email protected]/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>

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

Upvotes: 0

Views: 40

Answers (1)

Victor
Victor

Reputation: 181

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/

Upvotes: 1

Related Questions