Kevin Powell - Community•2y ago

Intersection Observer Animations feels jumpy

Hi! I have created this site https://sheaco.com/ Intersection observer works however the animation feels a bit jumpy. when site uncached the animation goes downward squeezes then pops up. I am not sure how I fix this?

Sam

Shea & Company

Home

1 Reply

stcodeOP•2y ago

const observerOptions = {
            root: null,
            threshold: 0.5,
            rootMargin: '0px 0px -50px 0px',
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('in-view');
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);

        const sections = Array.from(document.getElementsByClassName('section'));
        for (const section of sections) {
            const fadeups = section.getElementsByClassName('fade-delay');
            for (let count = 0; count < fadeups.length; count++) {
                fadeups[count].setAttribute('style', `transition-delay: ${count * 0.25}s`);
            }
            observer.observe(section);
        }

const observerOptions = {
            root: null,
            threshold: 0.5,
            rootMargin: '0px 0px -50px 0px',
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('in-view');
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);

        const sections = Array.from(document.getElementsByClassName('section'));
        for (const section of sections) {
            const fadeups = section.getElementsByClassName('fade-delay');
            for (let count = 0; count < fadeups.length; count++) {
                fadeups[count].setAttribute('style', `transition-delay: ${count * 0.25}s`);
            }
            observer.observe(section);
        }

this is the setting for intersection observer

Gaming

Programming

Intersection Observer Animations feels jumpy