What's the correct way to use ScrollTrigger to trigger multiple functions?

[maeOlives]

I successfully used ScrollTrigger and the callback onEnter to trigger a function, but I'm having trouble when trying to trigger multiple elements with the same class. Before, when just triggering an animation for multiple elements of the same class, I would use the jQuery "each" function, but unfortunately it doesn't work in this scenario. This code below works:

const projectTitle = document.getElementById('bc-projects__heading');
const newerText = new functionName(projectTitle, {
  timeOffset: 25,
  callback: () => {
    console.log('working')
  }
});

function starterFx() {
  newerText.start();
  console.log('still working')
}

ScrollTrigger.create({
  trigger: ".bc-projects__heading",
  onEnter: starterFx,
  delay: 3,

})

 

But when using the jQuery function with ScrollTrigger onEnter, it doesn't work:

const projectTitle = document.getElementById('bc-projects__heading');
const newerText = new functionName(projectTitle, {
  timeOffset: 25,
  callback: () => {
    console.log('working')
  }
});

function starterFx() {
  newerText.start();
  console.log('stillworking')
}

$(".bc-middle-main__heading").each(function() {

  ScrollTrigger.create({
    trigger: $(this),
    onEnter: starterFx,
  })
});

Am I calling the API with the wrong arguments? 

[mvaneijgen]

Do you have minimal demo we could take a look at? This feels like a scoping issue. 

 

I don't use jQuery so this is pseudo code. GSAP has a helper utility to scope the query selecting of an element only to an specific element https://gsap.com/docs/v3/GSAP/UtilityMethods/selector() so below some code that would get ..bc-projects__heading inside the current loop of .bc-middle-main__heading. But we could explain this a lot better if you could post a minimal demo in which we could modify the code. Hope it helps and happy tweening! 

 

// const projectTitle = document.getElementById('bc-projects__heading'); // There should only be one ID on a page. 


$(".bc-middle-main__heading").each(function() {
  
  let q = gsap.utils.selector(this);
  
  const newerText = new function(q('.bc-projects__heading')), { // Get elment insite current .bc-projects__heading
  timeOffset: 25,
  callback: () => {
    console.log('working')
  }
});

function starterFx() {
  newerText.start();
  console.log('stillworking')
}

  ScrollTrigger.create({
    trigger: $(this),
    onEnter: starterFx,
  })
});

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

[maeOlives]

Thank you, this is really helpful.