Getting target element in batch

[callmegoon]

I'm trying to figure out how to target the element within a batch process on scrollTrigger.  In my simple example, I have a script that is using scrollTrigger to look for all elements with a particular class.  When it comes into view, I'm toggling a class to change the color.  I want to be able to possibly run other functions on that element as well.  For example, I may want to add another class to it.  Or, I may want to delay it based on a data attribute. But, I can't seem to figure out how to get each target element.  I tried "this", I tried "this.target".  I tried $(this). 

 

For the sake of this question, let's just say I want to add another class to each element after it comes into view. I would have thought something like this would work, but I must be doing something wrong.

 

ScrollTrigger.batch(".animateOnLoad", {

    toggleClass: "inView",

    onEnter: function() {

        var element = this.target;

        setTimeout(function () {

            element.addClass('animationComplete');

        }, 2000);

    },

    once: true

});

 

Any tips here would be much appreciated! 

See the Pen jOrqgPx by callmegoon (@callmegoon) on CodePen

[akapowl]

 

Hey @callmegoon

 

I think it is only just 'target', but if you want to make use of it with jquery-functions later, you'd have to wrap it accordingly, like so

 

var element = $(target);

 

See the Pen 07089c5c7430d8acee308feb6919f65f by akapowl (@akapowl) on CodePen

 

Is this, what you're after?

Hope it helps.

 

Cheers,

Paul

 

[ZachSaucier]

Or just use the vanilla JS version of changing classes instead  

 

But if you want to do something when the animation completes, you should use the onComplete callback. A more full demo of what you're trying to do would allow us to help you more clearly.

[callmegoon]

@akapowl That did the trick for me - thanks!

 

---

 

@ZachSaucier I wanted to use the onComplete method as well, but it doesn't seem to be firing for me when I use batch. Perhaps I'm not implementing correctly...

See the Pen qBNNOdy by callmegoon (@callmegoon) on CodePen

[mikel]

Hey @callmegoon,

 

This could be an option

 

See the Pen eYzzpqP?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy batching ...

Mikel

 

[callmegoon]

Thanks @mikel - that was actually the next thing on my list to try.  Thanks for the headstart!

[ZachSaucier]

On 10/18/2020 at 8:40 AM, callmegoon said:

I wanted to use the onComplete method as well, but it doesn't seem to be firing for me when I use batch. Perhaps I'm not implementing correctly...

Toggling a class is not an animation  So no onComplete fires in that situation.