Kevin Powell - Community•2y ago

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',
    });
});

5 Replies

b1mind•2y ago

don't spread it till you combine them*

const texts = document.querySelectorAll('.core-value-text');
const boxes = document.querySelectorAll('.core-value-container');
let combine = [...texts, ...boxes];

const texts = document.querySelectorAll('.core-value-text');
const boxes = document.querySelectorAll('.core-value-container');
let combine = [...texts, ...boxes];

also a better way could be one ScrollTrigger with stagger 😄

b1mind•2y ago

https://codepen.io/b1mind/pen/yLeoQOG

Brent Morton

CodePen

GSAP Scroll Trigger Basic Scrub

...

b1mind•2y ago

I don't quite know what you are doing but just giving ya options. codepens are best if you can put one together. sideNote: you have invalid syntax with the const boxes: andconst background:

stcodeOP•2y ago

Thank you for the information however I need both of them from index[0] to work together I want to animated two thing in the same time but both of them need to toggle a class in the same time

b1mind•2y ago

Look at my reply in FrontEnd Horse

Gaming

Programming

How can i combine these arrays elements together gsap, scroll trigger, vanilla js