Enhancing Fullpage.js with a custom scroll delay feature

Question

Enhancing Fullpage.js with a custom scroll delay feature

One issue I'm having is with a fading div "box" using ".fp-viewing" as a trigger for the transition effect. The problem arises when the page begins scrolling upon .fp-viewing being activated, causing the box to scroll out of view before its animation completes.

I am looking for a way to prevent the scrolling from starting immediately when .fp-viewing is triggered until the box has finished its animation lasting 4 seconds.

.box{
  transition: all 4s ease-out;
  -webkit-transition: all 4s ease-out;
}

.fp-viewing-2 .box{
  opacity: 0;
}

javascript jquery css fullpage.js

Answer 1

Answer №1

Explore the functionality provided by fullpage.js for preemptively interrupting a scroll movement.

Access live demo here

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

new fullpage('#fullpage', {
      sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    onLeave: function(origin, destination, direction){
        var curTime = new Date().getTime();

        //animating my element
        $('#element').addClass('animate');

        clearTimeout(timeoutId);

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

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

        return animationIsFinished;
    },
});

Answer 2

Explore the functionality provided by fullpage.js for preemptively interrupting a scroll movement.

Access live demo here

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

new fullpage('#fullpage', {
      sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    onLeave: function(origin, destination, direction){
        var curTime = new Date().getTime();

        //animating my element
        $('#element').addClass('animate');

        clearTimeout(timeoutId);

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

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

        return animationIsFinished;
    },
});

Answer 3

Answer №2

#fullpage {
    animation-delay: 1s !important;
}

Alternatively, you could update the addAnimation function within fullpage.js

Answer 4

#fullpage {
    animation-delay: 1s !important;
}

Alternatively, you could update the addAnimation function within fullpage.js

Answer 5

Answer №3

Here is the solution that worked for me:

$(elem).fullpage({ 
/// options, 
onLeave: function(origin, destination, direction){ 
if(animationIsFinished === false){ 
// execute some code 
} 
clearTimeout(timeoutId); 
timeoutId = setTimeout(function(){ 
animationIsFinished = true;
 $.fn.fullpage.moveTo(destination); 
   setTimeout(() => { 
     animationIsFinished = false; 
   }, 200); 
}, 600); 
return animationIsFinished;

Answer 6

Here is the solution that worked for me:

$(elem).fullpage({ 
/// options, 
onLeave: function(origin, destination, direction){ 
if(animationIsFinished === false){ 
// execute some code 
} 
clearTimeout(timeoutId); 
timeoutId = setTimeout(function(){ 
animationIsFinished = true;
 $.fn.fullpage.moveTo(destination); 
   setTimeout(() => { 
     animationIsFinished = false; 
   }, 200); 
}, 600); 
return animationIsFinished;

Answer 7

Answer №4

I have found a simple and cost-effective solution by creating a custom function wrapper for the Full Page functionality that I require. By using settimeout as demonstrated in this specific response, I am able to trigger the desired function at my convenience.

function executeDelayedSlide() {
    fullpage_api.moveSlideRight();
}

// Trigger slide change on select
$('select').on('change', function(){
    setTimeout(executeDelayedSlide, 500);
})

Answer 8

I have found a simple and cost-effective solution by creating a custom function wrapper for the Full Page functionality that I require. By using settimeout as demonstrated in this specific response, I am able to trigger the desired function at my convenience.

function executeDelayedSlide() {
    fullpage_api.moveSlideRight();
}

// Trigger slide change on select
$('select').on('change', function(){
    setTimeout(executeDelayedSlide, 500);
})

Enhancing Fullpage.js with a custom scroll delay feature

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Switching from AngularJS to vanilla JavaScript or integrating AngularJS and Flask on a single server

Cross-origin resource sharing policy is preventing a request from the client-side to the server

Illumination causes surfaces to transform

Can a website be designed to load a specific font for mobile phones, such as Arial Black for iOS?

transitioning from having async set to false to now setting it to true

When the 'shown' event is triggered by manually activating a Bootstrap modal

Is there a method to obtain over 10 markers on the map?

Learn how to send information to a form and receive a response when a key is pressed, either up or down, by

What is the significance of storing the array length in the selection sort algorithm?

Iterating through an array of objects and performing reduction based on various key-value pairs

Tips for enabling browser back and forward functionality in a one-page website design

When working with multiple states in React, the toggle does not update on click when using setState

Validating Two DateTime Pickers as a Group with Javascript in asp.net

Tips for creating basic Jasmine and Karma tests for an Angular application to add an object to an array of objects

Is there a way to delay loading 'div' until a few seconds after the 'body' has been fully loaded?

I would like a div element to slide up from the bottom of the page

Searching for a specific key and its corresponding value within an Object Literal (JSON string / object) is necessary

The replaceWith() function in jQuery is able to transform PHP code into an HTML comment

Having trouble with Vue 3 Component State not updating following an asynchronous operation?

Implement FluentUI Progress Component as the New Style in Blazor