stcode
stcode
PostsComments
KPCKevin Powell - Community
Created by stcode on 7/31/2023 in #front-end
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?
2 replies
KPCKevin Powell - Community
Created by stcode on 12/16/2022 in #front-end
How can i combine these arrays elements together gsap, scroll trigger, vanilla js
Hello I am working on combining these elements together. I am not are how I can just scroll them together based on texts element height that I have ? How do I combine those arrays of elements 
const texts = [...document.querySelectorAll('.core-value-text')];
const boxes: [...document.querySelectorAll('.core-value-container')];
const background: [...document.querySelectorAll('.main-box')];

texts.forEach(el => {
    gsap.timeline({
        scrollTrigger: {
            trigger: el,
            start: 'top 350px',
            scrub: true,
            pin: '#section-5',
            toggleClass: "is-active",
            end:  () => "+=" + el.offsetHeight,
        }
    })
    .to(el, {
        ease: 'none',
    });
});
const texts = [...document.querySelectorAll('.core-value-text')];
const boxes: [...document.querySelectorAll('.core-value-container')];
const background: [...document.querySelectorAll('.main-box')];

texts.forEach(el => {
    gsap.timeline({
        scrollTrigger: {
            trigger: el,
            start: 'top 350px',
            scrub: true,
            pin: '#section-5',
            toggleClass: "is-active",
            end:  () => "+=" + el.offsetHeight,
        }
    })
    .to(el, {
        ease: 'none',
    });
});
12 replies