Jump to content

How I can add intersection observer's callback with window.requestIdleCallback()?


alessiopaoletti

Recommended Posts

I have an intersection observer for one animation, but i want to use window.requestIdleCallback()

Where I should add the code window.requestIdleCallback(callback_1)?

my script:

if (document.querySelector('#weddings')) { 

let observer_1;
let Element_1;
let prevRatio = 0.0;
let options = {
    root: null,
    rootMargin: "0px",
    threshold: buildThresholdList()
};

// Set things up
        Element_1 = document.querySelector("#img-1");
        initObserver();

//////////////////////////////////////////////////////////////////////////////

function initObserver() {
    observer_1 = new IntersectionObserver(callback_1, options);
    observer_1.observe(Element_1);
}

/////////////////////////////////////////////////////////////////////////////

function buildThresholdList() {...}

/////////////////////////////////////////////////////////////////////////////

var gallerySroll_1 = anime({...});

////////////////////////////////////////////////////////////////////////////

function callback_1 (entries, observer_1) {
  entries.forEach((entry) => {
    if(entry.boundingClientRect.top <= 0 && entry.intersectionRatio != prevRatio){
                gallerySroll_1.seek(gallerySroll_1.duration * (entry.intersectionRatio));
    }else{ gallerySroll_1.seek(1000); }
    prevRatio = entry.intersectionRatio;
  });
}
}

if I add the code at the start after the if before anything i got the error:

TypeError: entries.forEach is not a function
    callback_1 https://alessiopaolettidesign.it/ph/js/main.js:343

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...