Delay GSAP scroll animation for each element instead of all at once - GreenSock

Question

For each div with the class of '.content-page-section-scroll-animation-component__values-div' I'm running a GSAP scrollAnimation for their child elements. Currently they all animate at the same time, but I want them to be delayed so that the function runs for the first .content-page-section-scroll-animation-component__values-div and child elements, followed by the rest etc.

Using GSAP delays to the animations doesn't work because that just staggers it in relation to the next animation, rather than the next .content-page-section-scroll-animation-component__values-div.

Any help would be greatly appreciated!

import { gsap } from 'gsap';

// Select all the values divs
const valuesDivs = $('.content-page-section-scroll-animation-component__values-div');

valuesDivs.each(function (index, div) {
  if (window.innerWidth >= 960) {
    gsap
    .timeline({
      scrollTrigger: {
        trigger: ".content-page-section-scroll-animation-component",
        scrub: 0.3,
        start: "-70%",
        end:'+=280',
        markers: true,
      }
    })
    .to(div.querySelector('.content-page-section-scroll-animation-component__icon-wrap'),
    {
      duration: 0.2,
      height: 'auto',
      x: 0,
      opacity: 1,
      paddingBottom: '10px',
    })
    .to(div.querySelector('.content-page-section-scroll-animation-component__value-sub-heading'), {
      duration: 0.2,
      opacity: 1,
      height: 'auto',
      y: 0,
    }, '-=0.2')
    .to(div.querySelector('.content-page-section-scroll-animation-component__value-icon'), {
      duration: 0.2,
      opacity: 1
    }, '-=0.2')
    .to(div, {
      duration: 0.2,
      borderColor: '#265f58',
    }, '-=0.2')
    .to(document.querySelector(`.content-page-section-scroll-animation-component__main-img${index + 1}`), {
      duration: 0.2,
      opacity: 1,
    }, '-=0.2')

    gsap
    .timeline({
      scrollTrigger: {
        trigger: ".content-page-section-scroll-animation-component",
        scrub: 0.3,
        start: "-30%",
        end:'+=280',
      }
    })
    .to(div.querySelector('.content-page-section-scroll-animation-component__icon-wrap'),
    {
      duration: 0.2,
      height: 0,
      x: -20,
      opacity: 0,
      paddingBottom: '0',
    })
    .to(div.querySelector('.content-page-section-scroll-animation-component__value-sub-heading'), {
      duration: 0.2,
      opacity: 0,
      height: 0,
      y: 20,
    }, '-=0.2')
    .to(div.querySelector('.content-page-section-scroll-animation-component__value-icon'), {
      duration: 0.2,
      opacity: 0
    }, '-=0.2')
    .to(div, {
      duration: 0.2,
      borderColor: '#d6dfdc',
    }, '-=0.2')
    .to(document.querySelector(`.content-page-section-scroll-animation-component__main-img${index + 1}`), {
      duration: 0.2,
      opacity: 0,
    }, '-=0.2')

  };
});