ScrollMagic with each loop and $(this).find

Question

I am trying to animate several span elements inside my h1-tags with ScrollMagic.

The goal is to loop through every h1 (except the first one), find the spans with .msk classes and add another class (.is-visible) to their children.

I already set up an each loop, but i don't know how to correctly combine $(this) with another selector.

My code looks like this:

$('h1:not(:first)').each(function() {

 var msk = $(this).find('.msk span');
 console.log(msk);

 var h1Scene = new ScrollMagic.Scene({
  triggerElement: this,
  triggerHook: 0.7,
  reverse: false,
 })
 .addIndicators({
   name: "H1"
 })
 .setClassToggle(msk, 'is-visible')
 .addTo(controller)
});

I already did some research, but i still can't figure out how it works.

Answer 1

According to the documentation the first argument of the setClassToggle function should be A Selector targeting one or more elements or a DOM object that is supposed to be modified.

But when you call var msk = $(this).find('.msk span'); you will have and jQuery object stored in the msk variable. So this should be an invalid call

.setClassToggle(msk, 'is-visible')

Try to call this instead

.setClassToggle(msk[0], 'is-visible')

it will give you access to the pure DOM element selected by the jQuery.